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

Question

Im trying to run "Npm Run Build" on my reactjs website but I keep getting this error:

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

TypeError: MiniCssExtractPlugin is not a constructor

Ive looked at other solutions to this problem which say to run this command:

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

Another Says to delete node_modules and package.lock.json both of these didnt work for me.

here is what my 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"
 }
}

anyone know why this wont work??

Answer 1

This is because of an update of version 2.5.0.

Version 2.5.1 should solve this issue so please install it if you can.

If you can't, please try two things:

Maybe resolutions doesn't work because of a cache issue:

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

Still not working? Change the import:

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