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.

Accepted Answer

resolve error using following command.
npm install --save jquery

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'

Accepted Answer

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 4

If you are using React with Bootstrap and you're getting this error, it may be because you're using the lower version of Bootstrap. I solved it by upgrading the version to Bootstrap version 5.

Answer 5

If using mac OSX, npm version 5.0.0 or greater, try this command on your project folder terminal: npm install jquery jquery-ui.

Answer 6

Rails 6 : yarn add jquery work for me

Webpack Module Not Found: Error: Can't Resolve 'Jquery'

6 Answers

Must Read

Your Answer

James H. Sterling

Webpack Module Not Found: Error: Can't Resolve 'Jquery'

6 Answers

Must Read

Your Answer

Sign up or log in

Post as a guest

James H. Sterling