I'm 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
I've 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 didn't 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 won't work??
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');