TypeError: webpack.DefinePlugin is not a constructor
TypeError: webpack.DefinePlugin is not a constructor
我正在尝试将插件添加到我的 webpack.config.js 文件中,但是当我这样做时出现此错误。
[webpack-cli] Failed to load '/Users/slatifi/git/hcah/webpack.config.js' config
[webpack-cli] TypeError: webpack.DefinePlugin is not a constructor
at Object.<anonymous> (/Users/slatifi/git/hcah/webpack.config.js:44:8)
at Module._compile (/Users/slatifi/git/hcah/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1035:10)
at Module.load (internal/modules/cjs/loader.js:879:32)
at Function.Module._load (internal/modules/cjs/loader.js:724:14)
at Module.require (internal/modules/cjs/loader.js:903:19)
at require (/Users/slatifi/git/hcah/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
at loadConfig (/Users/slatifi/git/hcah/node_modules/webpack-cli/lib/webpack-cli.js:1322:31)
at WebpackCLI.resolveConfig (/Users/slatifi/git/hcah/node_modules/webpack-cli/lib/webpack-cli.js:1454:44)
at WebpackCLI.createCompiler (/Users/slatifi/git/hcah/node_modules/webpack-cli/lib/webpack-cli.js:1839:33)
这是我的 webpack.config.js 文件:
const { webpack } = require("webpack");
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [{ loader: "babel-loader" }],
},
{
test: /\.jsx$/,
exclude: /node_modules/,
use: [{ loader: "babel-loader" }],
},
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
{
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
"style-loader",
// Translates CSS into CommonJS
"css-loader",
// Compiles Sass to CSS
"sass-loader",
],
},
{
test: /\.(png|jpe?g|gif|svg)$/i,
use: [
{
loader: "file-loader",
},
],
},
],
},
resolve: {
extensions: [".js", ".jsx", ".css", ".png"],
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development')
})
]
};
我正在尝试添加这个 env 变量来解决我的 React 应用程序遇到的另一个问题(尝试使用导致这些问题的 rsuite),见下文:
defaultProps.js:34 Uncaught ReferenceError: process is not defined
at eval (defaultProps.js:34)
at eval (StepItem.js:99)
at Module../node_modules/rsuite/es/Steps/StepItem.js (main.js:5094)
at __webpack_require__ (main.js:6051)
at eval (Steps.js:18)
at Module../node_modules/rsuite/es/Steps/Steps.js (main.js:5105)
at __webpack_require__ (main.js:6051)
at eval (index.js:5)
at Module../node_modules/rsuite/es/Steps/index.js (main.js:5116)
at __webpack_require__ (main.js:6051)
如有任何建议,我们将不胜感激。
我之前遇到过同样的问题,问题是这行代码:
const { webpack } = require("webpack");
您需要做的就是删除大括号 {}
,其余代码将正常工作:
const webpack = require("webpack");
我遇到了同样的问题。已接受的答案中提供的解决方案用于删除大括号。但是您也可以简单地执行此操作而不是删除括号。
const { webpack, DefinePlugin } = require("webpack");
都一样
我正在尝试将插件添加到我的 webpack.config.js 文件中,但是当我这样做时出现此错误。
[webpack-cli] Failed to load '/Users/slatifi/git/hcah/webpack.config.js' config
[webpack-cli] TypeError: webpack.DefinePlugin is not a constructor
at Object.<anonymous> (/Users/slatifi/git/hcah/webpack.config.js:44:8)
at Module._compile (/Users/slatifi/git/hcah/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1035:10)
at Module.load (internal/modules/cjs/loader.js:879:32)
at Function.Module._load (internal/modules/cjs/loader.js:724:14)
at Module.require (internal/modules/cjs/loader.js:903:19)
at require (/Users/slatifi/git/hcah/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
at loadConfig (/Users/slatifi/git/hcah/node_modules/webpack-cli/lib/webpack-cli.js:1322:31)
at WebpackCLI.resolveConfig (/Users/slatifi/git/hcah/node_modules/webpack-cli/lib/webpack-cli.js:1454:44)
at WebpackCLI.createCompiler (/Users/slatifi/git/hcah/node_modules/webpack-cli/lib/webpack-cli.js:1839:33)
这是我的 webpack.config.js 文件:
const { webpack } = require("webpack");
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [{ loader: "babel-loader" }],
},
{
test: /\.jsx$/,
exclude: /node_modules/,
use: [{ loader: "babel-loader" }],
},
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
{
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
"style-loader",
// Translates CSS into CommonJS
"css-loader",
// Compiles Sass to CSS
"sass-loader",
],
},
{
test: /\.(png|jpe?g|gif|svg)$/i,
use: [
{
loader: "file-loader",
},
],
},
],
},
resolve: {
extensions: [".js", ".jsx", ".css", ".png"],
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development')
})
]
};
我正在尝试添加这个 env 变量来解决我的 React 应用程序遇到的另一个问题(尝试使用导致这些问题的 rsuite),见下文:
defaultProps.js:34 Uncaught ReferenceError: process is not defined
at eval (defaultProps.js:34)
at eval (StepItem.js:99)
at Module../node_modules/rsuite/es/Steps/StepItem.js (main.js:5094)
at __webpack_require__ (main.js:6051)
at eval (Steps.js:18)
at Module../node_modules/rsuite/es/Steps/Steps.js (main.js:5105)
at __webpack_require__ (main.js:6051)
at eval (index.js:5)
at Module../node_modules/rsuite/es/Steps/index.js (main.js:5116)
at __webpack_require__ (main.js:6051)
如有任何建议,我们将不胜感激。
我之前遇到过同样的问题,问题是这行代码:
const { webpack } = require("webpack");
您需要做的就是删除大括号 {}
,其余代码将正常工作:
const webpack = require("webpack");
我遇到了同样的问题。已接受的答案中提供的解决方案用于删除大括号。但是您也可以简单地执行此操作而不是删除括号。
const { webpack, DefinePlugin } = require("webpack");
都一样