When I run the 'webpack' command, I get this error:
ERROR in ./js/main.js Module not found: Error: Can't resolve 'jquery' in '...\js' @ ./js/main.js 3:0-16 4:0-23
In package.json I have:
"devDependencies": {
"handlebars": "^4.0.6",
"handlebars-loader": "^1.4.0",
"jquery": "^3.2.1",
"path": "^0.12.7"
},
In webpack.config.js:
var path = require("path");
module.exports = {
entry: "./js/main.js",
output: {
path: __dirname + "/js",
filename: "scripts-bundled.js"
},
resolve: {
modules: [
path.join(__dirname, "js/helpers")
]
},
module: {
loaders: [
{test: /\.hbs$/, loader: "handlebars-loader"}
]
}
};
And in main.js at the top of the file, I have:
import $ from 'jquery';
I'm also using handlebars in main.js. Could it be that handlebars or handlebars-loader is interfering with the jquery? I've used webpack and jquery without this issue before in another project where I didn't use handlebars, but maybe it has nothing to do with it.
resolve error using following command.
npm install --save jquery
Well in my case it was something about importing jquery instead of jQuery, it is a webpack config:
externals: {
// require("jquery") is external and available
// on the global var jQuery
"jquery": "jQuery"
}
have a look at this: webpack Can't resolve 'jquery'
The handlebars has nothing to do with it. The problem is that you changed resolve.modules to [path.join(__dirname, "js/helpers")]. So webpack will only look in js/helpers for any module, but jquery and other dependencies from npm are in node_modules. The default value of resolve.modules is ["node_modules"]. You also need to add node_modules to keep the regular module resolution.
resolve: {
modules: [
path.join(__dirname, "js/helpers"),
"node_modules"
]
},