CODEWITHSUNDEEP
reactjsnode-modulesreact-three-fiberdrei
kwing25
kwing25

Reputation: 3

Import Error with @react-three/drei / react-three-fiber

I'm trying to use @react-three/drei. I've successfully installed and used @react-three/fiber but when I installed @react-three/drei. I get the following error:

./node_modules/three-stdlib/lights/RectAreaLightUniformsLib.js
Attempted import error: 'DataUtils' is not exported from 'three'.

Getting the error when I use this import for @react-three/drei-

import { Preload, ScrollControls, Scroll, useScroll, Image, useFBO, PerspectiveCamera } from '@react-three/drei'

App.jsx

import * as THREE from 'three'
import { Suspense, useRef, useState } from 'react'
import { Canvas, useFrame, useThree } from '@react-three/fiber'
import { Preload, ScrollControls, Scroll, useScroll, Image, useFBO, PerspectiveCamera } from '@react-three/drei'

import SiteNav from "./components/Nav/Nav"
import MainContainer from "./pages/MainContainer";

function App() {
  return (
      <div className="App">
        <SiteNav />
        <MainContainer />
      </div>
  )
}

export default App;

Any help would be appreciated! Thanks

Upvotes: 0

Views: 4199

Answers (2)

Neelesh Aggarwal
Neelesh Aggarwal

Reputation: 1

It can be solved by running the command

npm install --legacy-peer-deps three

Upvotes: 0

Cva
Cva

Reputation: 124

I think the problem here is react-three/drei uses stand alone three-stdlib npm i three-stdlib should solve the problem.

https://github.com/pmndrs/drei react-drei docs says the following:

A growing collection of useful helpers and abstractions for react-three-fiber.

npm install @react-three/drei 👉 this package is using the stand-alone three-stdlib instead of three/examples/jsm. 👈

Upvotes: 2

Related Questions