Webpack模块未找到错误：错误：无法解析'jquery'。

Question

当我运行“webpack”命令时，出现以下错误：

ERROR in ./js/main.js Module not found: Error: Can't resolve 'jquery' in '...\js' @ ./js/main.js 3:0-16 4:0-23

在package.json中，我有以下内容：

"devDependencies": {
   "handlebars": "^4.0.6",
   "handlebars-loader": "^1.4.0",
   "jquery": "^3.2.1",
   "path": "^0.12.7"
},

在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"}
    ]
  }
};

在 main.js 文件的顶部，我有以下内容：

import $ from 'jquery';

我在main.js中也使用了handlebars。可能是handlebars或handlebars-loader与jquery发生了冲突吗？我之前在另一个项目中使用webpack和jquery时没有遇到这个问题，但也许与此无关。

- sdMarth

---

据我所知，你应该使用JQLite来在webpack中使用jQuery。 - Nalin Aggarwal

Answer 1

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

- Lav Kumar

---

如果您使用的是npm> 5.0.0，则无需使用“--save”标志。 - Adam_G

Answer 2

在我这种情况下，问题在于导入了jquery而不是jQuery，这是一个webpack配置：

externals: {
    // require("jquery") is external and available
    //  on the global var jQuery
    "jquery": "jQuery"
}

看看这个： webpack无法解析'jquery'

- Ebrahim

Answer 3

问题与手柄无关。问题在于您将 resolve.modules 更改为 [path.join(__dirname, "js/helpers")]。因此，Webpack 只会在 js/helpers 中查找任何模块，但是 jquery 和其他来自 npm 的依赖项位于 node_modules。默认值为 resolve.modules 是 ["node_modules"]。您还需要添加 node_modules 以保持常规的模块解析。

resolve: {
  modules: [
    path.join(__dirname, "js/helpers"),
    "node_modules"
  ]
},

- Michael Jungo

Answer 4

如果您正在使用React和Bootstrap，并且遇到了此错误，可能是因为您正在使用较低版本的Bootstrap。我解决了这个问题，通过升级到Bootstrap 5版本。

- Prince

Answer 5

如果您使用的是macOS操作系统，npm版本为5.0.0或更高版本，请在项目文件夹终端上尝试运行以下命令：npm install jquery jquery-ui。

- Limo

Answer 6

Rails 6: yarn add jquery 对我有效。

- Thoux

---

虽然这段代码片段可能是解决方案，但包括解释真的有助于提高您的帖子质量。请记住，您正在回答未来读者的问题，而这些人可能不知道您的代码建议原因。 - Shawn Hemelstrand