[ERROR] Could not resolve "three"

[ran-bt]

Hi Adrian, I am getting the following error in the terminal when i try to import "Canvas" from "@react-three/fiber" in the Computers component:

✘ [ERROR] Could not resolve "three"

node_modules/@react-three/fiber/dist/react-three-fiber.esm.js:5:23:
  5 │ import * as THREE from 'three';
  

You can mark the path "three" as external to exclude it from the bundle, which will remove this error.

I am not sure how to fix this. I have even copied and pasted from the github code but it still isn't working.

please help!

[Caspar2318]

Hi, running the command "npm install three" will solve this.

[Sindvokhumalo]

"npm install three" didnt help but then i ran this command => npm install --legacy-peer-deps three

[ran-bt]

Same fo me, "npm install --legacy-peer-deps three" solved the issue

[ran-bt]

Thanks for the help :)

[shaddydevops]

Guys am having problem with primitive , mesh , pointLight not beign recognised. please help

[JSto19]

So, I have run several variations of this issue, and could not get the error to fix. Ran: "npm install --legacy-peer-deps three", "npm install --legacy-peer-deps @react-three/drei@9.'latest'", and others. However, I upgraded from a huge series of "Error ----three"; to a long series of objects with suggestions, to now vite:import-analysis followed by 17 | import { Suspense, useEffect, useState } from "react"; 18 | import { Canvas } from "@react-three/fiber"; 19 | import { OrbitControls, Preload, useGLTF } from "@react-three/drei"; | ^ 20 | import CanvasLoader from "../Loader"; 21 | const Computers = () => { Followed by my personal PC errors.

Any ideas?

[JSto19]

I figured it out. I had to uninstall drei a second time. Bad gouge I guess?

[mkaif111]

I have the same issue, @JSto19 did uninstalling drei resolved your problem?

[mkaif111]

I got it in Computers.jsx in the last line : export default Computers is written but in hero section we are importing ComputerCanvas function just replacing

export default Computers -> export default ComputerCanvas will resolve the issue.

[mosaifKhan]

--> npm install --legacy-peer-deps three <-- type this code to solve that error "Canvas" from "@react-three/fiber"

[RyanAshbaugh]

Same fo me, "npm install --legacy-peer-deps three" solved the issue

Worked for me as well, thanks

[AniketSharma99]

I try npm install --legacy-peer-deps three but still getting same error also try npm install three @react-three/fiber after that getting other error Failed to resolve import "@react-three/drei" from "src/components/canvas/Computers.jsx". Does the file exist? any idea ? help