TypeError：webpack.ProvidePlugin 不是构造函数

Posted 2023-03-08

【中文标题】TypeError：webpack.ProvidePlugin 不是构造函数

【英文标题】：TypeError: webpack.ProvidePlugin is not a constructor

【发布时间】：2021-05-23 09:09:58

【问题描述】：

我正在尝试使用简单的引导程序，jquery 插件bootstrap-show-password，但在加载带有表单的页面时显示错误Uncaught ReferenceError: $ is not defined。

我不明白为什么 jquery 不会被加载。我照常做

npm install bootstrap jquery popper.js --save

在我的app.js 我有

//import jQuery from "jquery";
//window.$ = window.jQuery = jQuery;
// this should be loaded with webpack, right?! ^

import "bootstrap";
import "bootstrap-show-password";

我正在查看 webpack docs，它说要使用插件提供程序，但是当我将其添加到我的 webpack.config.js 时

new webpack.ProvidePlugin(
  $: 'jquery',
  jQuery: 'jquery',
);

npm run build 给我TypeError: webpack.ProvidePlugin is not a constructor 错误

我错过了需要安装的东西吗？

这是我的 package.json 依赖项

  "devDependencies": 
    "@babel/preset-env": "^7.12.17",
    "autoprefixer": "^9.8.6",
    "babel-loader": "^8.2.2",
    "browser-sync": "^2.26.14",
    "eslint": "^7.20.0",
    "eslint-loader": "^4.0.2",
    "htmlnano": "^0.2.8",
    "imagemin-cli": "^6.0.0",
    "node-sass": "^5.0.0",
    "npm-run-all": "^4.1.5",
    "onchange": "^7.1.0",
    "postcss": "^8.2.6",
    "postcss-cli": "^8.3.1",
    "posthtml": "^0.15.1",
    "posthtml-cli": "^0.9.1",
    "posthtml-modules": "^0.7.3",
    "stylelint": "^13.11.0",
    "webpack": "^5.23.0",
    "webpack-cli": "^4.5.0"
  ,
  "dependencies": 
    "bootstrap": "^4.6.0",
    "bootstrap-show-password": "^1.2.1",
    "jquery": "^3.5.1",
    "popper.js": "^1.16.1"
  

【参考方案1】：

好的，几个小时后我发现罪魁祸首在webpack.config.js中被错误地初始化了webpack var。因为那超出了我的能力，我在那里

const  webpack  = require("webpack");

而不是

const webpack = require("webpack");

【讨论】：

我遇到了同样的错误，这是必需的修复。感觉就像我刚刚度过了一个 denvercoder9 时刻，只有答案xkcd.com/979

我有同样的事情。有一个非常流行的 webpack 教程在顶部附近有错误的代码。我猜这是复制和粘贴。对于所有遇到相同问题的人来说，这是一个非常有用的答案。