@react-three/drei / react-three-fiber 的导入错误答案

【问题标题】：Import Error with @react-three/drei / react-three-fiber@react-three/drei / react-three-fiber 的导入错误
【发布时间】：2021-11-19 02:15:44
【问题描述】：

我正在尝试使用 @react-three/drei。我已经成功安装并使用了@react-three/fiber，但是当我安装了@react-three/drei。我收到以下错误：

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

当我将此导入用于 @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;

任何帮助将不胜感激！谢谢

【问题讨论】：

标签： reactjs node-modules react-three-fiber drei

【解决方案1】：

我认为这里的问题是 react-three/drei 使用独立的three-stdlib npm i three-stdlib 应该可以解决问题。

https://github.com/pmndrs/dreireact-drei 文档说如下：

react-three-fiber 的有用助手和抽象越来越多。

npm install @react-three/drei ? 这个包使用的是单机版三个标准库而不是三个/examples/jsm。 ?

【讨论】：