Could not resolve dependency with sanity in nextjs app

Question

I am trying to deploy my next.js project, but I keep getting the following error with everything I do:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: rcd_drone@0.1.0
npm ERR! Found: @sanity/client@3.4.1
npm ERR! node_modules/@sanity/client
npm ERR!   @sanity/client@"^3.2.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @sanity/client@"^2.11.0" from next-sanity-image@3.2.1
npm ERR! node_modules/next-sanity-image
npm ERR!   next-sanity-image@"^3.2.1" 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.

I also have the following dependencies:

{
  "name": "rcd_drone",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@babel/core": "^7.17.9",
    "@sanity/client": "^3.2.0",
    "@sanity/image-url": "^1.0.1",
    "@stripe/stripe-js": "^1.25.0",
    "canvas-confetti": "^1.5.1",
    "next": "^12.1.0",
    "next-sanity-image": "^3.2.1",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-hot-toast": "^2.2.0",
    "react-icons": "^4.3.1",
    "frontmatter-markdown-loader": "^3.6.3",
    "stripe": "^8.209.0"
  },
  "devDependencies": {
    "@babel/preset-react": "^7.16.7",
    "eslint": "8.13.0",
    "eslint-config-next": "12.1.4"
  }
}

Answer 1

Try deleting node_modules folder and package-lock.json file and run:

npm install --legacy-peer-deps

This is going to make fresh installation of the modules.