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: 