React Native Conflicting peer dependency

[Rakha112]

Hey, I'm getting a Conflicting peer dependency error after installing @react-three/fiber.
Here's the error

❯ npm install @react-three/drei
npm error code ERESOLVE
npm error ERESOLVE could not resolve
npm error
npm error While resolving: [email protected]
npm error Found: [email protected]
npm error node_modules/react
npm error   peer react@"*" from @react-native/[email protected]
npm error   node_modules/@react-native/virtualized-lists
npm error     @react-native/virtualized-lists@"0.74.84" from [email protected]
npm error     node_modules/react-native
npm error       peer react-native@"*" from @react-native/[email protected]
npm error       8 more (@react-navigation/elements, ...)
npm error   peer react@"*" from @react-navigation/[email protected]
npm error   node_modules/@react-navigation/core
npm error     @react-navigation/core@"^6.4.16" from @react-navigation/[email protected]
npm error     node_modules/@react-navigation/native
npm error       peer @react-navigation/native@"^6.0.0" from @react-navigation/[email protected]
npm error       node_modules/@react-navigation/elements
npm error         @react-navigation/elements@"^1.3.30" from @react-navigation/[email protected]
npm error         node_modules/@react-navigation/stack
npm error       2 more (@react-navigation/stack, the root project)
npm error   25 more (@react-navigation/elements, ...)
npm error
npm error Could not resolve dependency:
npm error peer react@"^18.3.1" from [email protected]
npm error node_modules/react-dom
npm error   peerOptional react-dom@">=18.0" from @react-three/[email protected]
npm error   node_modules/@react-three/fiber
npm error     @react-three/fiber@"^8.16.8" from the root project
npm error     2 more (@react-three/drei, @react-spring/three)
npm error   peer react-dom@">=16.13" from [email protected]
npm error   node_modules/@react-three/fiber/node_modules/react-use-measure
npm error     react-use-measure@"^2.1.1" from @react-three/[email protected]
npm error     node_modules/@react-three/fiber
npm error       @react-three/fiber@"^8.16.8" from the root project
npm error       2 more (@react-three/drei, @react-spring/three)
npm error   1 more (@react-three/drei)
npm error
npm error Conflicting peer dependency: [email protected]
npm error node_modules/react
npm error   peer react@"^18.3.1" from [email protected]
npm error   node_modules/react-dom
npm error     peerOptional react-dom@">=18.0" from @react-three/[email protected]
npm error     node_modules/@react-three/fiber
npm error       @react-three/fiber@"^8.16.8" from the root project
npm error       2 more (@react-three/drei, @react-spring/three)
npm error     peer react-dom@">=16.13" from [email protected]
npm error     node_modules/@react-three/fiber/node_modules/react-use-measure
npm error       react-use-measure@"^2.1.1" from @react-three/[email protected]
npm error       node_modules/@react-three/fiber
npm error         @react-three/fiber@"^8.16.8" from the root project
npm error         2 more (@react-three/drei, @react-spring/three)
npm error     1 more (@react-three/drei)
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.

and this is the package.json

  "dependencies": {
    "@react-navigation/native": "^6.1.17",
    "@react-navigation/stack": "^6.3.29",
    "@react-three/fiber": "^8.16.8",
    "@types/three": "^0.165.0",
    "expo": "^51.0.0",
    "expo-gl": "~14.0.2",
    "react": "18.2.0",
    "react-native": "0.74.2",
    "react-native-gesture-handler": "^2.17.1",
    "react-native-safe-area-context": "^4.10.5",
    "react-native-screens": "^3.32.0",
    "three": "^0.165.0"
  },

[CodyJasonBennett]

What does npm ls react-dom and npm ls react give you?

[Rakha112]

Hey @CodyJasonBennett, thanks for the quick response. Here are the results from that command

❯ npm ls react-dom
[email protected] /Users/rakha/Documents/PROJECT-DEV/Mobile-Dev/Testing
└─┬ @react-three/[email protected]
  ├── [email protected]
  └─┬ [email protected]
    └── [email protected] deduped

❯ npm ls react
npm error code ELSPROBLEMS
npm error invalid: [email protected] /Users/rakha/Documents/PROJECT-DEV/Mobile-Dev/Testing/node_modules/react
[email protected] /Users/rakha/Documents/PROJECT-DEV/Mobile-Dev/Testing
├─┬ @react-three/[email protected]
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped invalid: "^18.3.1" from node_modules/react-dom
│ ├─┬ [email protected]
│ │ └── [email protected] deduped invalid: "^18.3.1" from node_modules/react-dom
│ ├─┬ [email protected]
│ │ └── [email protected] deduped invalid: "^18.3.1" from node_modules/react-dom
│ ├── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped invalid: "^18.3.1" from node_modules/react-dom
│ └─┬ [email protected]
│   └── [email protected] deduped invalid: "^18.3.1" from node_modules/react-dom
├─┬ [email protected]
│ ├─┬ @react-native/[email protected]
│ │ └── [email protected] deduped invalid: "^18.3.1" from node_modules/react-dom
│ ├─┬ [email protected]
│ │ └── [email protected] deduped invalid: "^18.3.1" from node_modules/react-dom
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
└── [email protected]