[英]TypeError: webpack.ProvidePlugin is not a constructor
I'm trying to use a simple bootstrap, jquery plugin bootstrap-show-password
but on load the page with form shows an error Uncaught ReferenceError: $ is not defined
.我正在尝试使用简单的引导程序 jquery 插件
bootstrap-show-password
但在加载带有表单的页面时显示错误Uncaught ReferenceError: $ is not defined
。
I don't understand why jquery wouldn't be loaded.我不明白为什么不会加载 jquery。 I did the usual
我照常做
npm install bootstrap jquery popper.js --save
and in my app.js
I have在我的
app.js
我有
//import jQuery from "jquery";
//window.$ = window.jQuery = jQuery;
// this should be loaded with webpack, right?! ^
import "bootstrap";
import "bootstrap-show-password";
I'm looking at the webpack docs and it says to use the the plugin provider, but when I add that to my webpack.config.js
我正在查看 webpack文档,它说使用插件提供程序,但是当我将它添加到我的
webpack.config.js
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
});
npm run build
gives me TypeError: webpack.ProvidePlugin is not a constructor
error npm run build
给了我TypeError: webpack.ProvidePlugin is not a constructor
错误
Did I miss something that needs to be installed?我错过了需要安装的东西吗?
Here are my package.json
dependencies这是我的
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"
}
OK, after a few hours I found that the culprit was incorrectly initialized webpack
var in webpack.config.js
.好的,几个小时后我发现罪魁祸首是在
webpack.config.js
中错误地初始化webpack
var。 For reason that's beyond me I had there因为那超出了我的原因,我在那里
const { webpack } = require("webpack");
instead of代替
const webpack = require("webpack");
Had the same issue and I was able to resolve it.有同样的问题,我能够解决它。 This was my webpack config initially:
这是我最初的 webpack 配置:
const { webpack } = require("webpack");
...
plugins: [
...
new webpack.ProvidePlugin({
Buffer: ["buffer", "Buffer"],
}),
...
],
...
Here's what I did to resolve it:这是我为解决它所做的:
// Import ProvidePlugin directly
const { webpack, ProvidePlugin } = require("webpack");
...
plugins: [
...
// call the ProvidePlugin constructor directly
new ProvidePlugin({
Buffer: ["buffer", "Buffer"],
}),
...
],
...
webpack.ProvidePlugin
will only work if you used the default import of webpack like this, webpack.ProvidePlugin
仅在您像这样使用 webpack 的默认导入时才有效,
const webpack = require("webpack");
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.