Search code examples
react-nativethree.jsreact-three-fiberreact-three-dreir3f

Why does the error While resolving: [email protected] occur while installing react-three-fiber in react-native?

I am trying to use react-three-fiber in react-native. When I try to install and run it according to the manual, the following error occurs.

When I run npm install, the following error occurs. Can you tell me why it occurs?

npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"18.2.0" from the root project
npm ERR!   peer react@"*" from @react-native/[email protected]
npm ERR!   node_modules/@react-native/virtualized-lists
npm ERR!     @react-native/virtualized-lists@"0.74.85" from [email protected]
npm ERR!     node_modules/react-native
npm ERR!       react-native@"0.74.3" from the root project
npm ERR!       2 more (@react-native/virtualized-lists, @react-three/fiber)
npm ERR!   9 more (@react-three/fiber, react-use-measure, its-fine, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^18.3.1" from [email protected]
npm ERR! node_modules/react-dom
npm ERR!   peerOptional react-dom@">=18.0" from @react-three/[email protected]
npm ERR!   node_modules/@react-three/fiber
npm ERR!     @react-three/fiber@"^8.16.8" from the root project
npm ERR!   peer react-dom@">=16.13" from [email protected]
npm ERR!   node_modules/@react-three/fiber/node_modules/react-use-measure
npm ERR!     react-use-measure@"^2.1.1" from @react-three/[email protected]
npm ERR!     node_modules/@react-three/fiber
npm ERR!       @react-three/fiber@"^8.16.8" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/react
npm ERR!   peer react@"^18.3.1" from [email protected]
npm ERR!   node_modules/react-dom
npm ERR!     peerOptional react-dom@">=18.0" from @react-three/[email protected]
npm ERR!     node_modules/@react-three/fiber
npm ERR!       @react-three/fiber@"^8.16.8" from the root project
npm ERR!     peer react-dom@">=16.13" from [email protected]
npm ERR!     node_modules/@react-three/fiber/node_modules/react-use-measure
npm ERR!       react-use-measure@"^2.1.1" from @react-three/[email protected]
npm ERR!       node_modules/@react-three/fiber
npm ERR!         @react-three/fiber@"^8.16.8" 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.
npm ERR! 
npm ERR! 
npm ERR! For a full report see:
npm ERR! /Users/m/.npm/_logs/2024-07-16T16_01_32_801Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: /Users/m/.npm/_logs/2024-07-16T16_01_32_801Z-debug-0.log

I finished the installation like this, everything went according to the manual.

However, when I run npm install, an error occurs and I don't know why it occurs. Can you give me some advice?

1. npx react-native init temp --template react-native-template-typescript --pm npm 
2. npx install-expo-modules@latest 
3. expo install expo-gl 
4. npm install three @react-three/fiber 
5. make file in project root > metro.config.js. 


module.exports = { 
    resolver: { 
        sourceExts: ['js', 'jsx', 'json', 'ts', 'tsx', 'cjs', 'mjs'], 
        assetExts: ['glb', 'gltf', 'png', 'jpg'], 
  
  }, 
} 

6. npm install <<<<< error return
Solution

  • i'm finally found a way fit me, the way is change version of react to 18.2.0 and than install react-dom so both same version like this

    "react": "18.2.0",
"react-dom": "18.2.0"

    i thinks latest version of react not support react-native-fiber or something is wrong

    i dont know this is right way but worked for me