reactjsnext.jsfrontendreact-three-fiberreact-three-drei

Issue Installing react-three/fiber@alpha react-three/drei dependency


I'm trying to install @react-three/drei and react-three/fiber@alpha for a 3d globe componenet in nextjs. but i get the below error when i try to install them.

npm error node_modules/@react-three/fiber
npm error   @react-three/fiber@"9.0.0-alpha.8" from the root project
npm error
npm error Could not resolve dependency:
npm error peer @react-three/fiber@"^8" from @react-three/drei@9.121.3
npm error node_modules/@react-three/drei
npm error   @react-three/drei@"*" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps

I get that this is some kind of dependency conflict cause by react-three/drei not accepting a version of @react-three/fiber a try to install the specific version of reat-three/fiber so that it can work.
But i get another error of downgrade my react19 to react18 and even if i downgrade it doesnt resolve .

I tried legacy command also but that also did not work.


Solution

  • The issue occurring due to new React 19 version, because React 19 is not officially supporting @react-three/fiber yet.

    To Resolve this

    1. Downgrade to React 18

    Then install @react-three/fiber

    1. For @react-three/drei after installing it you might get an error saying three-mesh-bvh@0.7.8 is deprecated, just simply use v0.8.0 version