webpack Module not found: Error: Can't resolve 'jquery'

Question

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.

Answer 1

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'