warning " > [email protected]" has incorrect peer dependency "react@^16 || ^17".

and this error also:

warning "eslint-config-next > @typescript-eslint/parser > @typescript-eslint/typescript-estree > [email protected]" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".

I am not getting what to do actually but I am attaching my package.json file here...

{
  "name": "coderzsales",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "crypto-js": "^4.1.1",
    "jsonwebtoken": "^8.5.1",
    "mongoose": "^6.3.3",
    "next": "12.1.6",
    "react": "18.1.0",
    "react-dom": "18.1.0",
    "react-icons": "^4.3.1",
    "react-toastify": "^9.0.1",
    "react-top-loading-bar": "^2.1.0"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.7",
    "eslint": "8.15.0",
    "eslint-config-next": "12.1.6",
    "postcss": "^8.4.13",
    "tailwindcss": "^3.0.24"
  }
}

I think that I have to make some changes in package.json file but, have no idea what will happen to app after making changes! I have no that much experience!

warning " > [email protected]" has incorrect peer dependency "react@^16 || ^17".

and this error also:

warning "eslint-config-next > @typescript-eslint/parser > @typescript-eslint/typescript-estree > [email protected]" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".

I am not getting what to do actually but I am attaching my package.json file here...

{
  "name": "coderzsales",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "crypto-js": "^4.1.1",
    "jsonwebtoken": "^8.5.1",
    "mongoose": "^6.3.3",
    "next": "12.1.6",
    "react": "18.1.0",
    "react-dom": "18.1.0",
    "react-icons": "^4.3.1",
    "react-toastify": "^9.0.1",
    "react-top-loading-bar": "^2.1.0"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.7",
    "eslint": "8.15.0",
    "eslint-config-next": "12.1.6",
    "postcss": "^8.4.13",
    "tailwindcss": "^3.0.24"
  }
}

I think that I have to make some changes in package.json file but, have no idea what will happen to app after making changes! I have no that much experience!

• javascript
• reactjs
• next.js

3 Answers 3

As mentioned in the above answers this error usually indicates that you have a package installed in your project that depends on a specific version of another package, but that required package is not installed in your project or is not the correct version. Since you're getting this error while deploying to vercel, you need to override your install command with npm install --legacy-peer-deps

You can use this command to fix your issue.

npm install --legacy-peer-deps

We get this error in react top loading package because the author of it has made it using older versions of react (v16) and hasn't maintained the peer deps to tell whether the code can run on newer versions of react or not. The command I posted will most probably fix this issue. It worked for me.

Just means the library authors haven't updated the peer deps to show that it's ok or not to use that version.

There's a good chance you'll be alright using the --legacy-peer-deps flag with npm i.

I'd be sure the versions are compatible first, since there were a few breaking changes from react 16/17 to react 18.