Issue importing react-three-fiber and react-three/drei

Question

I'm importing react-three-fiber and react-three/drei in my app.js, but when I start my app it gives me this error: ./node_modules/@react-three/drei/core/Billboard.js Module not found: Can't resolve '@react-three/fiber' in '.../node_modules/@react-three/drei/core' I'm importing those components like this

import  React, { Suspense, useRef, useState } from 'react'
import { Canvas, useFrame } from 'react-three-fiber'
import { useGLTF } from '@react-three/drei/'

somebody know that issue and how can I solve it?

Archiplasm

it's @react-three/fiber since v6, all repos have been consolidated – Obla

Answer 1

to add to the answer above, if you use yarn, you can use

yarn add three @react-three/fiber
yarn add three @react-three/drei

or

npm i three @react-three/fiber
npm i three @react-three/drei

both packages depend on the three.js library, so it is smart to add the dependency in the command, if the threejs module isn't installed, it will do that to prevent unresolved dependencies

Beore

Answer 2

you got to install the packages. You can go to https://www.npmjs.com/ and find the install commands there:

npm i @react-three/fiber
npm i @react-three/drei

Abukir

You can also do it in one line: npm i @react-three/fiber @react-three/drei – Sawn