Dependency errors with react/react/material-ui and more on npm install

Question

My React project was working fine and I don't recall what I did to break it but when I npm run (or install or anything) I get this set of errors and I am unsure how to go about resolving these conflicts.

I've tried changing some the versions as it seems to suggest in the errors but it just seems to lead to more dependency errors. Is there any methodology/shortcuts to resolving them?

npm install                                                                                                                                          
npm WARN config init.author.email Use `--init-author-email` instead.
npm WARN config init.author.name Use `--init-author-name` instead.
npm WARN config init.license Use `--init-license` instead.
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: dev-toolbox@0.4.0
npm ERR! Found: react@16.14.0
npm ERR! node_modules/react
npm ERR!   react@"^16.3.0" from the root project
npm ERR!   peer react@"^16.8.0 || ^17.0.0" from @material-ui/core@4.11.3
npm ERR!   node_modules/@material-ui/core
npm ERR!     @material-ui/core@"4.11.3" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"17.0.1" from react-dom@17.0.1
npm ERR! node_modules/react-dom
npm ERR!   react-dom@"17.0.1" from the root project
npm ERR!   peer react-dom@"^16.8.0 || ^17.0.0" from @material-ui/core@4.11.3
npm ERR!   node_modules/@material-ui/core
npm ERR!     @material-ui/core@"4.11.3" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Sorry for the vague question but hope the error details are enough. Let me know if I need to provide more context.

The package.json file:

{
  "name": "dev-toolbox",
  "version": "0.4.0",
  "author": "",
  "license": "MIT",
  "description": "dev tools",
  "scripts": {
    "start": "concurrently 'npm run server' 'npm run client'",
    "client": "react-scripts start",
    "build": "GENERATE_SOURCEMAP=false react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "server": "nodemon server.js  --ignore client",
    "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start",
    "compile:scss": "node-sass --importer node_modules/node-sass-package-importer/dist/cli.js src/assets/scss/argon-dashboard-pro-material-ui.scss src/assets/css/argon-dashboard-pro-material-ui.css",
    "minify:scss": "node-sass --importer node_modules/node-sass-package-importer/dist/cli.js src/assets/scss/argon-dashboard-pro-material-ui.scss src/assets/css/argon-dashboard-pro-material-ui.min.css --output-style compressed",
    "map:scss": "node-sass --importer node_modules/node-sass-package-importer/dist/cli.js src/assets/scss/argon-dashboard-pro-material-ui.scss src/assets/css/argon-dashboard-pro-material-ui.css --source-map true",
    "all:scss": "npm run compile:scss && npm run minify:scss && npm run map:scss"
  },
  "dependencies": {
    "@emotion/react": "11.1.5",
    "@emotion/styled": "11.1.5",
    "@fortawesome/fontawesome-free": "5.15.2",
    "@fullcalendar/core": "5.5.1",
    "@fullcalendar/daygrid": "5.5.0",
    "@fullcalendar/interaction": "5.5.0",
    "@material-ui/core": "4.11.3",
    "@material-ui/data-grid": "4.0.0-alpha.22",
    "@material-ui/icons": "4.11.2",
    "@material-ui/lab": "4.0.0-alpha.57",
    "@mui/icons-material": "^5.0.5",
    "@mui/material": "^5.0.6",
    "body-parser": "^1.19.0",
    "bootstrap": "4.6.0",
    "chart.js": "2.9.4",
    "clsx": "1.1.1",
    "concurrently": "^6.4.0",
    "console-feed": "^3.2.2",
    "cors": "^2.8.5",
    "date-fns": "^2.25.0",
    "dropzone": "5.7.6",
    "express": "^4.17.1",
    "jss-rtl": "0.3.0",
    "list.js": "2.3.1",
    "logrock": "^3.1.0",
    "moment": "2.29.1",
    "node-sass-package-importer": "^3.0.4",
    "nodemon": "^2.0.15",
    "nouislider": "14.6.3",
    "prop-types": "15.7.2",
    "pubnub": "^4.33.1",
    "quill": "1.3.7",
    "react": "^16.3.0",
    "react-bootstrap-sweetalert": "5.2.0",
    "react-bootstrap-table-next": "^1.1.0",
    "react-bootstrap-table2-paginator": "2.1.2",
    "react-bootstrap-table2-toolkit": "2.1.3",
    "react-chartjs-2": "2.11.1",
    "react-copy-to-clipboard": "5.0.3",
    "react-countup": "^6.1.0",
    "react-datetime": "3.0.4",
    "react-dom": "17.0.1",
    "react-jvectormap": "0.0.16",
    "react-perfect-scrollbar": "1.5.8",
    "react-router-dom": "5.2.0",
    "react-scripts": "^5.0.0",
    "react-timer-hook": "^3.0.5",
    "react-to-print": "2.12.3",
    "react-toastify": "^8.0.3",
    "reactstrap": "^9.0.0",
    "request": "^2.88.2",
    "sass": "^1.49.9"
  },
  "optionalDependencies": {
    "popper.js": "1.16.1",
    "typescript": "4.1.5"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "eslint-plugin-unused-imports": "1.1.0"
  },
  "keywords": [],
  "proxy": "http://localhost:5000/",
  "directories": {
    "doc": "docs"
  }
}

Answer 1

You require react ^16.3.0 but at the same time react-dom 17.0.1. Try updating your dependencies to newer versions.