Override for react-error-overlay@^6.0.9 conflicts with direct dependency

Question

I have changed my node version and keep getting this error if I try to install another package or just try to run npm install. Here is the error message:

npm ERR! code EOVERRIDE

npm ERR! Override for react-error-overlay@^6.0.9 conflicts with direct dependency

npm ERR! A complete log of this run can be found in:

npm ERR! C:\Users\admin\AppData\Local\npm-cache_logs\2022-12-08T16_39_09_063Z-debug-0.log`

My package.json file is below:

{
  "name": "kamamini",
  "version": "0.1.0",
  "author": "Moctar Yonli",
  "private": true,
  "dependencies": {
    "@ckeditor/ckeditor5-build-classic": "^28.0.0",
    "@ckeditor/ckeditor5-build-decoupled-document": "^28.0.0",
    "@ckeditor/ckeditor5-react": "^3.0.2",
    "@emotion/react": "^11.5.0",
    "@emotion/styled": "^11.3.0",
    "@firebase/auth-interop-types": "^0.1.5",
    "@glidejs/glide": "^3.5.2",
    "@material-ui/core": "^4.11.3",
    "@material-ui/icons": "^4.11.2",
    "@metismenu/react": "0.0.2",
    "@mui/icons-material": "^5.0.5",
    "@mui/material": "^5.0.6",
    "@mui/styles": "^5.0.2",
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/react": "^11.2.5",
    "@testing-library/user-event": "^12.7.1",
    "axios": "^0.24.0",
    "bootstrap": "^5.1.3",
    "dotenv": "^10.0.0",
    "firebase": "^8.4.1",
    "formik": "^2.2.9",
    "framer-motion": "^4.1.17",
    "gh-pages": "^3.2.3",
    "history": "^5.0.1",
    "moment": "^2.29.4",
    "node-sass": "^7.0.1",
    "perfect-scrollbar": "^1.5.2",
    "react": "^17.0.1",
    "react-confetti": "^6.1.0",
    "react-currency-format": "^1.1.0",
    "react-dom": "^17.0.1",
    "react-dropzone": "^11.3.2",
    "react-helmet-async": "^1.3.0",
    "react-html-parser": "^2.0.2",
    "react-image-gallery": "^1.0.9",
    "react-material-ui-carousel": "^2.2.6",
    "react-payment-inputs": "^1.1.9",
    "react-player": "^2.9.0",
    "react-redux": "^7.2.4",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^4.0.3",
    "react-share": "^4.4.0",
    "react-slick": "^0.28.1",
    "react-swipeable-views": "^0.14.0",
    "react-toastify": "^7.0.3",
    "react-use": "^17.4.0",
    "reactstrap": "^8.9.0",
    "redux": "^4.1.0",
    "redux-thunk": "^2.3.0",
    "slick-carousel": "^1.8.1",
    "styled-components": "^5.3.3",
    "web-vitals": "^1.1.0",
    "yup": "^0.32.9"
  },
  "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"
    ]
  },
  "overrides": {
    "react-error-overlay": "6.0.9"
  },
  "devDependencies": {
    "react-error-overlay": "^6.0.9"
  }
}

Why do I get this error when trying to install a package?

Answer 1

As per the docs

You may not set an override for a package that you directly depend on unless both the dependency and the override itself share the exact same spec.

Your override for react-error-overlay specifies 6.0.9 (i.e. the exact version), while your devDependencies specifies ^6.0.9 (i.e. match 6.0.9 or any patch release above). These specs are not exactly the same, so you get the error.

You can fix it by:

• updating your overrides to use ^6.0.9
• updating your devDependencies to use 6.0.9
• updating your overrides to use "react-error-overlay": "$react-error-overlay" which tells it to use the version referenced in the dependencies directly

To make this limitation easier to deal with, overrides may also be defined as a reference to a spec for a direct dependency by prefixing the name of the package you wish the version to match with a $.

Answer 2

This answer is correct.

Reproducing your findings

Thanks for including the package.json in your question!
As a result, anyone can reproduce your findings.

In a completely empty directory, I added your package.json, and then ran npm install.

The response is in the following screenshot.

The recommended action is to define the version as a reference to the package used as a direct dependency. Replace 6.0.9 with $react-error-overlay in the overrides clause.

  "overrides": {
    "react-error-overlay": "$react-error-overlay"
  },

This has the advantage of automatically adjusting the version in overrides, if the version in devDependencies ever changes in the future.

You have more work to do

Fixing the EOVERRIDE error doesn't mean you're all set to start working on your project.
Running npm install now results in an ERESOLVE error.
You've solved the EOVERRIDE error. Now you need to solve the ERESOLVE error …