How to get rid of "Conflicting Peer Depencies" error after new update

Question

I've been trying to fix the dependencies of my project and usually I get it to work but I've been stuck on this forever now and it slowed down my progress to a halt. I saw another post where they said delete node_modules and the package-lock file and then use yarn to install everything but I can't even manage to install yarn.

Here are the errors I keep getting:

(base) Air-Aurelie:Wassupp aurelie$ npm i yarn
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: react-dom@18.2.0
npm ERR! Found: react@18.1.0
npm ERR! node_modules/react
npm ERR!   peer react@">=16.8.0" from @openspacelabs/react-native-zoomable-view@2.1.1
npm ERR!   node_modules/@openspacelabs/react-native-zoomable-view
npm ERR!     @openspacelabs/react-native-zoomable-view@"^2.1.1" from the root project
npm ERR!   peer react@">=16.8.0" from @react-native-community/hooks@2.8.1
npm ERR!   node_modules/@react-native-community/hooks
npm ERR!     @react-native-community/hooks@"^2.8.1" from the root project
npm ERR!   25 more (@react-navigation/core, @react-navigation/elements, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^18.2.0" from react-dom@18.2.0
npm ERR! node_modules/react-dom
npm ERR!   peer react-dom@">=16.8.0" from @zendeskgarden/container-field@2.1.1
npm ERR!   node_modules/@zendeskgarden/container-field
npm ERR!     @zendeskgarden/container-field@"^2.1.0" from @zendeskgarden/react-forms@8.62.0
npm ERR!     node_modules/@zendeskgarden/react-forms
npm ERR!       @zendeskgarden/react-forms@"^8.62.0" from the root project
npm ERR!   peer react-dom@">=16.8.0" from @zendeskgarden/container-focusvisible@1.0.1
npm ERR!   node_modules/@zendeskgarden/container-focusvisible
npm ERR!     @zendeskgarden/container-focusvisible@"^1.0.0" from @zendeskgarden/react-theming@8.62.0
npm ERR!     node_modules/@zendeskgarden/react-theming
npm ERR!       peer @zendeskgarden/react-theming@"^8.1.0" from @zendeskgarden/react-forms@8.62.0
npm ERR!       node_modules/@zendeskgarden/react-forms
npm ERR!       1 more (the root project)
npm ERR!   7 more (@zendeskgarden/container-slider, ...)
npm ERR! 
npm ERR! Conflicting peer dependency: react@18.2.0
npm ERR! node_modules/react
npm ERR!   peer react@"^18.2.0" from react-dom@18.2.0
npm ERR!   node_modules/react-dom
npm ERR!     peer react-dom@">=16.8.0" from @zendeskgarden/container-field@2.1.1
npm ERR!     node_modules/@zendeskgarden/container-field
npm ERR!       @zendeskgarden/container-field@"^2.1.0" from @zendeskgarden/react-forms@8.62.0
npm ERR!       node_modules/@zendeskgarden/react-forms
npm ERR!         @zendeskgarden/react-forms@"^8.62.0" from the root project
npm ERR!     peer react-dom@">=16.8.0" from @zendeskgarden/container-focusvisible@1.0.1
npm ERR!     node_modules/@zendeskgarden/container-focusvisible
npm ERR!       @zendeskgarden/container-focusvisible@"^1.0.0" from @zendeskgarden/react-theming@8.62.0
npm ERR!       node_modules/@zendeskgarden/react-theming
npm ERR!         peer @zendeskgarden/react-theming@"^8.1.0" from @zendeskgarden/react-forms@8.62.0
npm ERR!         node_modules/@zendeskgarden/react-forms
npm ERR!         1 more (the root project)
npm ERR!     7 more (@zendeskgarden/container-slider, ...)
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.
npm ERR! 
npm ERR! See /Users/aurelie/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/aurelie/.npm/_logs/2022-12-22T16_55_08_011Z-debug-0.log

Does anyone know how to get me out of this? Should I just start a new project and reinstall everything?

NotX · Accepted Answer · 2022-12-22T17:31:40.570

It's not about reinstalling. Your dependencies come with peer dependency whose version constraints conflict with your project's dependencies. Imo you have three options:

Solve the conflict. E.g. @zendeskgarden/container-field seems to require react 16.x.y (with x > 8) - and with same for react-dom -, so either you have to install a newer version of container-field with (hopefully) a newer peer-dependency (no guarantee that's the case, you've got to check it out), or you have to downgrade your project's dependencies to react 16.8.0 (or the latest of those, i.e. react 16.14.0) (same with react-dom). Either approache must be done in your package.json. Note that downgrading might require downgrades of other dependencies, too, if they depend on react 17 or react 18 while you're with react 16. You can give it a try and see how far you get. If it works, it's the cleanest and safest solution.
You can try to run npm i --legacy-peer-deps. npm was more lenient back then, in most cases it won't cause any trouble. But you never know, you're actively ignoring version constraints.
You can override peer dependencies in your package.json, which might cause issues similar to --legacy-peer-deps. For this, your package.json needs an entry like

  "overrides": {
    "@zendeskgarden/container-field@2.1.1": {
      "react": "18.2.0",
      "react-dom": "18.2.0"
    }
  },

@Rémi-AntoineJoron Yes, it can become quite a mess to find a state which works for all dependencies. In general I would check: Is it possible to update the dependency which is causing trouble (like here `@zendeskgarden/container-field`)? If not, go a version back with the other depndency (e.g. `react`). If nothing helps, go with 2) (many ppl do) or 3. — NotX, Dec 23 '22 at 09:47
You think you could help me out with these: https://stackoverflow.com/questions/73613715/react-native-expo-is-there-a-way-to-cache-the-content-of-a-whole-directory-ins https://stackoverflow.com/questions/73612896/react-native-expo-is-there-a-way-to-hide-a-specific-view-or-component-dependin — Rémi-Antoine Joron, Dec 23 '22 at 22:26

How to get rid of "Conflicting Peer Depencies" error after new update

1 Answers1