Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Installing jQuery gives webpack errors

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: enter image description here

like image 804
chewchew Avatar asked Jul 07 '17 18:07

chewchew


Video Answer


1 Answers

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.

like image 179
Adam Prax Avatar answered Nov 15 '22 20:11

Adam Prax