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: react-dom@18.3.1
npm error Found: react@18.2.0
npm error node_modules/react
npm error   peer react@"*" from @react-native/virtualized-lists@0.74.84
npm error   node_modules/@react-native/virtualized-lists
npm error     @react-native/virtualized-lists@"0.74.84" from react-native@0.74.2
npm error     node_modules/react-native
npm error       peer react-native@"*" from @react-native/virtualized-lists@0.74.84
npm error       8 more (@react-navigation/elements, ...)
npm error   peer react@"*" from @react-navigation/core@6.4.16
npm error   node_modules/@react-navigation/core
npm error     @react-navigation/core@"^6.4.16" from @react-navigation/native@6.1.17
npm error     node_modules/@react-navigation/native
npm error       peer @react-navigation/native@"^6.0.0" from @react-navigation/elements@1.3.30
npm error       node_modules/@react-navigation/elements
npm error         @react-navigation/elements@"^1.3.30" from @react-navigation/stack@6.3.29
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 react-dom@18.3.1
npm error node_modules/react-dom
npm error   peerOptional react-dom@">=18.0" from @react-three/fiber@8.16.8
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 react-use-measure@2.1.1
npm error   node_modules/@react-three/fiber/node_modules/react-use-measure
npm error     react-use-measure@"^2.1.1" from @react-three/fiber@8.16.8
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: react@18.3.1
npm error node_modules/react
npm error   peer react@"^18.3.1" from react-dom@18.3.1
npm error   node_modules/react-dom
npm error     peerOptional react-dom@">=18.0" from @react-three/fiber@8.16.8
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 react-use-measure@2.1.1
npm error     node_modules/@react-three/fiber/node_modules/react-use-measure
npm error       react-use-measure@"^2.1.1" from @react-three/fiber@8.16.8
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
Testing@0.0.1 /Users/rakha/Documents/PROJECT-DEV/Mobile-Dev/Testing
└─┬ @react-three/fiber@8.16.8
  ├── react-dom@18.3.1
  └─┬ react-use-measure@2.1.1
    └── react-dom@18.3.1 deduped

❯ npm ls react
npm error code ELSPROBLEMS
npm error invalid: react@18.2.0 /Users/rakha/Documents/PROJECT-DEV/Mobile-Dev/Testing/node_modules/react
Testing@0.0.1 /Users/rakha/Documents/PROJECT-DEV/Mobile-Dev/Testing
├─┬ @react-three/fiber@8.16.8
│ ├─┬ its-fine@1.2.5
│ │ └── react@18.2.0 deduped
│ ├─┬ react-dom@18.3.1
│ │ └── react@18.2.0 deduped invalid: "^18.3.1" from node_modules/react-dom
│ ├─┬ react-reconciler@0.27.0
│ │ └── react@18.2.0 deduped invalid: "^18.3.1" from node_modules/react-dom
│ ├─┬ react-use-measure@2.1.1
│ │ └── react@18.2.0 deduped invalid: "^18.3.1" from node_modules/react-dom
│ ├── react@18.2.0 deduped
│ ├─┬ suspend-react@0.1.3
│ │ └── react@18.2.0 deduped invalid: "^18.3.1" from node_modules/react-dom
│ └─┬ zustand@3.7.2
│   └── react@18.2.0 deduped invalid: "^18.3.1" from node_modules/react-dom
├─┬ react-native@0.74.2
│ ├─┬ @react-native/virtualized-lists@0.74.84
│ │ └── react@18.2.0 deduped invalid: "^18.3.1" from node_modules/react-dom
│ ├─┬ react-shallow-renderer@16.15.0
│ │ └── react@18.2.0 deduped invalid: "^18.3.1" from node_modules/react-dom
│ └── react@18.2.0 deduped
├─┬ react-test-renderer@18.2.0
│ └── react@18.2.0 deduped
└── react@18.2.0

[MuriloBarranco]

+1

[jonathaneckman]

+1

[CodyJasonBennett]

@drcmda, either we add native support to use-measure and make react-dom an optional peer dep there, or we drop it from R3F in the meantime.