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: react-dom@18.3.1
npm ERR! Found: react@18.2.0
npm ERR! node_modules/react
npm ERR! react@"18.2.0" from the root project
npm ERR! peer react@"*" from @react-native/virtualized-lists@0.74.85
npm ERR! node_modules/@react-native/virtualized-lists
npm ERR! @react-native/virtualized-lists@"0.74.85" from react-native@0.74.3
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 react-dom@18.3.1
npm ERR! node_modules/react-dom
npm ERR! peerOptional react-dom@">=18.0" from @react-three/fiber@8.16.8
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 react-use-measure@2.1.1
npm ERR! node_modules/@react-three/fiber/node_modules/react-use-measure
npm ERR! react-use-measure@"^2.1.1" from @react-three/fiber@8.16.8
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: react@18.3.1
npm ERR! node_modules/react
npm ERR! peer react@"^18.3.1" from react-dom@18.3.1
npm ERR! node_modules/react-dom
npm ERR! peerOptional react-dom@">=18.0" from @react-three/fiber@8.16.8
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 react-use-measure@2.1.1
npm ERR! node_modules/@react-three/fiber/node_modules/react-use-measure
npm ERR! react-use-measure@"^2.1.1" from @react-three/fiber@8.16.8
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
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