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

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"
  ]
},

Answer 2

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'