运行 npm 运行构建时出现 MiniCssExtractPlugin 错误

Question

我试图在我的 reactjs 网站上运行“Npm Run Build”，但我不断收到此错误：

/usr/local/lib/node_modules/react-scripts/config/webpack.config.js:664
    new MiniCssExtractPlugin({
    ^

TypeError: MiniCssExtractPlugin is not a constructor

我查看了这个问题的其他解决方案，说运行这个命令：

npm i -D --save-exact mini-css-extract-plugin@2.4.5

另一个说删除 node_modules 和 package.lock.json 这两个都对我不起作用。

这是我的 package.json：

{
   "name": "web-client",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
      "@material-ui/core": "^4.12.3",
      "@testing-library/jest-dom": "^5.14.1",
      "@testing-library/react": "^11.2.7",
      "@testing-library/user-event": "^12.8.3",
      "axios": "^0.21.1",
      "bootstrap": "^5.1.0",
      "emailjs-com": "^3.2.0",
      "get-video-duration": "^4.0.0",
      "nodemailer": "^6.7.2",
      "prop-types": "^15.7.2",
      "react": "^17.0.2",
      "react-bootstrap": "^1.6.1",
      "react-dom": "^17.0.2",
      "react-dropzone": "^11.3.4",
      "react-icons": "^4.2.0",
      "react-modal": "^3.14.3",
      "react-router-dom": "^5.2.0",
      "react-s3-uploader": "^5.0.0",
      "react-scripts": "4.0.3",
      "styled-components": "^5.3.0",
      "web-vitals": "^1.1.2"
   },
  "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"
]
},
   "resolutions": {
"mini-css-extract-plugin": "2.4.5"
 }
}

有人知道为什么这行不通吗？

Answer 1

这是因为版本 2.5.0 的更新。

版本 2.5.1 应该可以解决这个问题，所以如果可以的话，请安装它。

如果不能，请尝试以下两种方法：

由于缓存问题， resolutions可能不起作用：

rm -rf node_modules && npm cache clean --force && npm i

还是行不通？ 更改导入：

const { default: MiniCssExtractPlugin } = require('mini-css-extract-plugin');