Getting error on running command `npm run build`, error `TypeError: MiniCssExtractPlugin is not a constructor`
Getting error on running command `npm run build`, error `TypeError: MiniCssExtractPlugin is not a constructor`
我正在使用 React 创建一个应用程序,它在 npm start
上运行良好,但是当我尝试构建该应用程序时,显示以下错误。
PS D:\ ****\ **\*\profile> npm run build
> profile@0.1.0 build
> react-scripts build
D:\ ****\ **\profile\node_modules\react-scripts\config\webpack.config.js:664
new MiniCssExtractPlugin({
^
TypeError: MiniCssExtractPlugin is not a constructor
at module.exports (D:\Documents\Project\React\profile\node_modules\react-scripts\config\webpack.config.js:664:9)
at Object.<anonymous> (D:\Documents\Project\React\profile\node_modules\react-scripts\scripts\build.js:58:16)
at Module._compile (node:internal/modules/cjs/loader:1101:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
at node:internal/main/run_main_module:17:47
我正在使用
Package name
Version
node
16.13.2
npm
8.1.2
npx
8.1.2
这是我的 package.json
文件。
{
"name": "profile",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.1",
"@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^13.5.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
我也尝试重新安装整个节点包,但我一次又一次地收到此错误。
mini-css-extract-plugin 版本 2.5.0 有更新。我通过添加 package.json
:
临时修复了它
"overrides": {
"mini-css-extract-plugin": "2.4.5"
}
首先尝试您的 npm
版本:
npm i -D --save-exact mini-css-extract-plugin@2.4.5
在文件 package-lock.json 中,在三个地方将 mini-css-extract-plugin 更改为 2.4.5:
1)
"mini-css-extract-plugin": {
"version": "2.4.5",
"resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.4.5.tgz",
"integrity": "sha512-oEIhRucyn1JbT/1tU2BhnwO6ft1jjH1iCX9Gc59WFMg0n5773rQU0oyQ0zzeYFFuBfONaRbQJyGoPtuNseMxjA==",
"requires": {
"schema-utils": "^4.0.0"
},
"node_modules/mini-css-extract-plugin": {
"version": "2.4.5",
"resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.4.5.tgz",
"integrity": "sha512-oEIhRucyn1JbT/1tU2BhnwO6ft1jjH1iCX9Gc59WFMg0n5773rQU0oyQ0zzeYFFuBfONaRbQJyGoPtuNseMxjA==",
"dependencies": {
"schema-utils": "^4.0.0"
},
- 也在文件底部:
"mini-css-extract-plugin": "^2.4.5",
- 在项目文件夹的顶层(覆盖旧文件夹)运行
npm install mini-css-extract-plugin@2.4.5
因此 'npm run build' 适合我
我正在使用 React 创建一个应用程序,它在 npm start
上运行良好,但是当我尝试构建该应用程序时,显示以下错误。
PS D:\ ****\ **\*\profile> npm run build
> profile@0.1.0 build
> react-scripts build
D:\ ****\ **\profile\node_modules\react-scripts\config\webpack.config.js:664
new MiniCssExtractPlugin({
^
TypeError: MiniCssExtractPlugin is not a constructor
at module.exports (D:\Documents\Project\React\profile\node_modules\react-scripts\config\webpack.config.js:664:9)
at Object.<anonymous> (D:\Documents\Project\React\profile\node_modules\react-scripts\scripts\build.js:58:16)
at Module._compile (node:internal/modules/cjs/loader:1101:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
at node:internal/main/run_main_module:17:47
我正在使用
Package name | Version |
---|---|
node | 16.13.2 |
npm | 8.1.2 |
npx | 8.1.2 |
这是我的 package.json
文件。
{
"name": "profile",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.1",
"@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^13.5.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
我也尝试重新安装整个节点包,但我一次又一次地收到此错误。
mini-css-extract-plugin 版本 2.5.0 有更新。我通过添加 package.json
:
"overrides": {
"mini-css-extract-plugin": "2.4.5"
}
首先尝试您的 npm
版本:
npm i -D --save-exact mini-css-extract-plugin@2.4.5
在文件 package-lock.json 中,在三个地方将 mini-css-extract-plugin 更改为 2.4.5: 1)
"mini-css-extract-plugin": {
"version": "2.4.5",
"resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.4.5.tgz",
"integrity": "sha512-oEIhRucyn1JbT/1tU2BhnwO6ft1jjH1iCX9Gc59WFMg0n5773rQU0oyQ0zzeYFFuBfONaRbQJyGoPtuNseMxjA==",
"requires": {
"schema-utils": "^4.0.0"
},
"node_modules/mini-css-extract-plugin": {
"version": "2.4.5",
"resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.4.5.tgz",
"integrity": "sha512-oEIhRucyn1JbT/1tU2BhnwO6ft1jjH1iCX9Gc59WFMg0n5773rQU0oyQ0zzeYFFuBfONaRbQJyGoPtuNseMxjA==",
"dependencies": {
"schema-utils": "^4.0.0"
},
- 也在文件底部:
"mini-css-extract-plugin": "^2.4.5",
- 在项目文件夹的顶层(覆盖旧文件夹)运行
npm install mini-css-extract-plugin@2.4.5
因此 'npm run build' 适合我