Getting error on running command `npm run build`, error `TypeError: MiniCssExtractPlugin is not a constructor`

Question

我正在使用 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"
    ]
  }
}

我也尝试重新安装整个节点包，但我一次又一次地收到此错误。

Answer 1

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

Answer 2

在文件 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' 适合我

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`

node.js

reactjs

npm

create-react-app

mini-css-extract-plugin