I am compiling a project with npm which was working perfectly fine a day before and now has suddenly stopped working for the code without changing anything. Error I am getting in the browser is attached for reference.

Steps I am following to clean compile my project:

rm -rf package-lock.json 
rm -rf node_modules/
rm -rf build/  
npm install 
npm run build 

My package.json file contains following data:

{
  "name": "dashboard",
  "version": "1.0.1",
  "description": "Dashboard",
  "author": "Inc.",
  "private": true,
  "scripts": {
    "analyze": "source-map-explorer 'build/static/js/*.js'",
    "start": "PORT=3006 react-scripts start",
    "build": "react-scripts build"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 10",
    "not op_mini all"
  ],
  "dependencies": {
    "@date-io/core": "1.3.13",
    "@date-io/date-fns": "1.3.13",
    "@fullcalendar/core": "4.4.2",
    "@fullcalendar/daygrid": "4.4.2",
    "@fullcalendar/interaction": "4.4.2",
    "@fullcalendar/react": "4.4.2",
    "@material-ui/core": "4.11.0",
    "@material-ui/docs": "4.0.0-beta.3",
    "@material-ui/icons": "4.9.1",
    "@material-ui/lab": "4.0.0-alpha.56",
    "@material-ui/pickers": "3.2.10",
    "@material-ui/styles": "4.10.0",
    "@material-ui/system": "4.9.14",
    "@reduxjs/toolkit": "1.4.0",
    "@sentry/react": "5.30.0",
    "@sentry/tracing": "6.0.4",
    "@types/dragula": "3.7.0",
    "@types/google-map-react": "1.1.8",
    "@types/react": "16.9.46",
    "@types/react-dom": "16.9.8",
    "@types/react-helmet": "5.0.16",
    "@types/react-redux": "7.1.9",
    "@types/react-router-dom": "5.1.5",
    "@types/react-syntax-highlighter": "11.0.4",
    "@types/redux-logger": "3.0.8",
    "@types/styled-components": "5.1.2",
    "axios": "0.21.1",
    "chart.js": "2.9.3",
    "css-vendor": "2.0.8",
    "date-fns": "2.15.0",
    "google-map-react": "1.1.7",
    "immer": "9.0.3",
    "json-logic-js": "2.0.1",
    "jss": "10.4.0",
    "material-ui-dropzone": "2.5.0",
    "moment": "2.29.1",
    "polished": "3.6.5",
    "prop-types": "15.7.2",
    "react": "16.13.1",
    "react-app-polyfill": "1.0.6",
    "react-chartjs-2": "2.10.0",
    "react-date-range": "1.1.3",
    "react-datetime": "3.0.4",
    "react-diff-viewer": "3.1.1",
    "react-dom": "16.13.1",
    "react-dragula": "1.1.17",
    "react-feather": "2.0.8",
    "react-google-login": "5.1.23",
    "react-helmet": "5.2.1",
    "react-jvectormap": "0.0.16",
    "react-perfect-scrollbar": "1.5.8",
    "react-quill": "1.3.5",
    "react-redux": "7.2.1",
    "react-router": "5.2.1",
    "react-router-dom": "5.2.0",
    "react-scripts": "3.4.3",
    "react-syntax-highlighter": "13.5.0",
    "redux": "4.0.5",
    "redux-logger": "3.0.6",
    "styled-components": "5.1.1",
    "typescript": "3.9.7",
    "universal-cookie": "4.0.4"
  },
  "devDependencies": {
    "@types/json-logic-js": "1.2.1",
    "@types/react-date-range": "1.1.4",
    "source-map-explorer": "2.5.2"
  }
}

Let me know what would have changed suddenly that same code no longer works.

More details:

$ npm -v
8.0.0

$ node -v
v16.11.1

Edit 1:

instrument.ts line 129 Function.prototype.apply.call(originalConsoleLevel, global.console, args);

CodePudding user response：

I guess the issue was with "jss": "10.4.0" in the package.json file. Material UI also has dependency and was adding "jss": "^10.0.3". I guess may be due to conflict it was causing replaceRule function issue.

CodePudding user response：

Ok, so if you run on your project

npm ls jss

it it will list all the packages that use jss npm ls result

As you can see I use for jss 10.5.1 while material-ui/styles uses 10.8.0 all I had to do is upgrade the version of the jss to match the version that mui/styles use

npm install jss@10.8.0

that made it work, also I would recommend seeing in the project where you actually use jss and see if you can avoid it