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'

Answer 2

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 3

使用以下命令解决错误。
npm install --save jquery

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

如果使用 mac OSX，npm v5.0.0 或 > 在你的项目文件夹终端上试试这个命令npm install jquery jquery-ui

Answer 6

Rails 6: yarn add jquery work for me