Every time I see this error , I use some flags or find some hacky way to deal with it. but now I’m using npx to install a component with shadcn, and it keeps exiting with this error.

How do I resolve the dependency conflict?

 npx shadcn-ui@latest add separator
⠸ Installing separator...Command failed with exit code 1: npm install @radix-ui/react-separator
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @typescript-eslint/[email protected]
npm WARN Found: [email protected]
npm WARN node_modules/eslint
npm WARN   peer eslint@"^6.0.0 || ^7.0.0 || >=8.0.0" from @eslint-community/[email protected]
npm WARN   node_modules/@eslint-community/eslint-utils
npm WARN     @eslint-community/eslint-utils@"^4.2.0" from [email protected]
npm WARN   2 more (eslint-import-resolver-typescript, the root project)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer eslint@"^8.56.0" from @typescript-eslint/[email protected]
npm WARN node_modules/@typescript-eslint/parser
npm WARN   @typescript-eslint/parser@"^5.4.2 || ^6.0.0 || 7.0.0 - 7.2.0" from [email protected]
npm WARN   node_modules/eslint-config-next
npm WARN 
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/eslint
npm WARN   peer eslint@"^8.56.0" from @typescript-eslint/[email protected]
npm WARN   node_modules/@typescript-eslint/parser
npm WARN     @typescript-eslint/parser@"^5.4.2 || ^6.0.0 || 7.0.0 - 7.2.0" from [email protected]       
npm WARN     node_modules/eslint-config-next
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/eslint
npm ERR!   peer eslint@"^6.0.0 || ^7.0.0 || >=8.0.0" from @eslint-community/[email protected]
npm ERR!   node_modules/@eslint-community/eslint-utils
npm ERR!     @eslint-community/eslint-utils@"^4.2.0" from [email protected]
npm ERR!   peer eslint@"*" from [email protected]
npm ERR!   node_modules/eslint-import-resolver-typescript
npm ERR!     eslint-import-resolver-typescript@"^3.5.2" from [email protected]
npm ERR!     node_modules/eslint-config-next
npm ERR!       dev eslint-config-next@"^14.2.3" from the root project
npm ERR!   1 more (the root project)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer eslint@"^7.23.0 || ^8.0.0" from [email protected]
npm ERR! node_modules/eslint-config-next
npm ERR!   dev eslint-config-next@"^14.2.3" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/eslint
npm ERR!   peer eslint@"^7.23.0 || ^8.0.0" from [email protected]
npm ERR!   node_modules/eslint-config-next
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.
npm ERR!
npm ERR!
npm ERR! For a full report see:
npm ERR! C:Userstemitope_kobo360AppDataLocalnpm-cache_logs2024-05-09T12_49_57_333Z-eresolve-report.txt   

npm ERR! A complete log of this run can be found in: C:Userstemitope_kobo360AppDataLocalnpm-cache_logs2024-05-09T12_49_57_333Z-debug-0.log

My package.json:

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@clerk/nextjs": "^4.30.0",
    "@hookform/resolvers": "^3.3.4",
    "@prisma/client": "^5.13.0",
    "@radix-ui/react-dialog": "^1.0.5",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-popover": "^1.0.7",
    "@radix-ui/react-slot": "^1.0.2",
    "axios": "^1.6.8",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.1",
    "cmdk": "^1.0.0",
    "lucide-react": "^0.378.0",
    "mongodb": "^6.6.1",
    "next": "^14.2.3",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-hook-form": "^7.51.4",
    "react-hot-toast": "^2.4.1",
    "tailwind-merge": "^2.3.0",
    "tailwindcss-animate": "^1.0.7",
    "zod": "^3.23.8",
    "zustand": "^4.5.2"
  },
  "devDependencies": {
    "@types/node": "^20.12.11",
    "@types/react": "^18.3.1",
    "@types/react-dom": "^18.3.0",
    "autoprefixer": "^10.4.19",
    "eslint": "^9.2.0",
    "eslint-config-next": "^14.2.3",
    "postcss": "^8.4.38",
    "prisma": "^5.13.0",
    "tailwindcss": "^3.4.3",
    "typescript": "^5.4.5"
  }
}

I tried running npx shadcn-ui@latest add separator --legacy-peer-deps, obviously that didn’t work. worst case scenario, I’ll have to install all the radix components I need and copy paste from the shadcn.