Installing jQuery gives webpack errors

Question

I npm installed jQuery and am now seeing a bunch of Module not found: Error: Can't resolve... errors. Any idea of what the root issue could be and a resolution?

ERROR in ./node_modules/jquery/lib/node-jquery.js
Module not found: Error: Can't resolve 'jsdom'...

ERROR in ./node_modules/jquery/lib/node-jquery.js
Module not found: Error: Can't resolve 'xmlhttprequest'...

ERROR in ./node_modules/jquery/lib/node-jquery.js
Module not found: Error: Can't resolve 'location'...

ERROR in ./node_modules/jquery/lib/node-jquery.js
Module not found: Error: Can't resolve 'navigator'...

I'm pretty sure this has something to do with webpack 2 after googling the errors, but none of the proposed solutions resolve the errors.

One solution that I've seen but did not work is putting the following in my webpack config:

plugins: [
  new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
  })
],

Here is my index.html:

<html>
  <head>
    <meta charset="utf-8">
    <title>Title</title>
  </head>
  <body>
    <div id="fb-root"></div>
    <div id="app"></div>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
    <script src="common.js"></script>
    <script src="bundle.js" type="text/javascript"></script>
  </body>
</html>

Here is my webpack.config.js:

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'public');
var APP_DIR = path.resolve(__dirname, 'src', 'js');

var node_dir = __dirname + '/node_modules';

var config = {
 entry: {
   app: APP_DIR + '/index.js',
   common: ["jquery"],
 },
 output: {
  path: BUILD_DIR,
  filename: 'bundle.js'
 },
 resolve: {
  // This is so that you don't have to write the file extension while importing it.
  // Instead of import HomeComponent from './HomeComponent.jsx'
  // you can do import HomeComponent from './HomeComponent'
  extensions: ['.js', '.jsx','.json', '*'],
  alias: {
      'jquery': node_dir + '/jQuery/src/wrapper.js',
    },
 },
 externals: {
    jquery: 'jQuery'
  },
 plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: "common",
      filename: "common.js",
      minChunks: Infinity,
    }),
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      jquery: "jquery",
      "window.jQuery": "jquery",
    }),
  ],
 module: {
    loaders : [
   {
    test : /\.jsx?/,
    include : APP_DIR,
    exclude: /node_modules/,
    loader : 'babel-loader'
   }
  ],
 },
};

module.exports = config;

And here is the error:

Have you seen this post yet? https://stackoverflow.com/questions/44084544/jquery-with-webpack-2 — justDan, Jul 07 '17 at 19:00

score 26 · Answer 1 · answered Jul 25 '17 at 19:07

26

Did you install the jQuery npm package instead of the jquery package? I had the same errors using the deprecated 'jQuery'. When I removed 'jQuery' and installed 'jquery', the errors went away.

answered Jul 25 '17 at 19:07

Adam Prax

6,413
3
30
31

Thank you. this is the exact issue I am facing too – Amna Oct 04 '19 at 07:20
This should be the answer! Was having the same issue. Installing jquery package instead of jQuery resolved everything – mlaribi Mar 02 '20 at 00:05

Harshadkumar Prajapati · Answer 2 · 2023-02-02T16:19:16.797

0

It's just conflict with the existing jQuery, If you are using laravel or any framework, make sure to uninstall jQuery by npm, as it's automatically loads at the framework end, works fine for me after that, if required external then sincerely use jquery rather than jQuery.

edited Feb 02 '23 at 16:19

answered Jan 31 '23 at 05:09

Harshadkumar Prajapati

21
3

Installing jQuery gives webpack errors

2 Answers2