从@react-three/drei导入Canvas报错：不存在该导出项

错误原因 #

Canvas组件不属于@react-three/drei库，它是@react-three/fiber的核心组件，你错误地从drei中导入该组件，导致导出不存在的报错。

修复步骤 #

1. 修正导入语句
   将从@react-three/drei导入Canvas的代码，改为从@react-three/fiber导入：

   // 替换原有错误导入
   import {Canvas} from '@react-three/drei'
   // 修改为正确导入
   import {Canvas} from '@react-three/fiber'
   

2. 完整修复后的代码

   import {React,Suspense,useEffect,useState} from 'react'
   import {Canvas} from '@react-three/fiber'
   import { OrbitControls,Preload,useGLTF } from '@react-three/drei'
   import CanvasLoader from '../Loader'
   
   
   const Computers = () => {
     const computer=useGLTF('./desktop_pc/scene.gltf');
     return (
       <mesh>
         <hemisphereLight intensity={0.15} groundColor="black"/>
         <pointLight intensity={1}/>
         <primitive object={computer.scene}/>
       </mesh>
     )
   }
   const ComputersCanvas=()=>{
     return(
       <Canvas
         frameLoop="demand"
         shadows
         camera={{position:[20,3,5],fov:25}}
         gl={{preserveDrawingBuffer:true}}
       >
         <Suspense fallback={<CanvasLoader/>}>
           <OrbitControls
             enableZoom={false}
             maxPolarAngle={Math.PI/2}
             minPolarAngle={Math.PI/2}  
         />
           <Computers/>
         </Suspense>
         <Preload all/>
       </Canvas>
     )
   }
   
   export default Computers
   

3. 额外检查项

   • 确保@react-three/fiber、@react-three/drei和three的版本相互兼容，避免版本不匹配引发其他问题
   • 确认useGLTF加载的模型路径正确，防止后续渲染失败

内容的提问来源于stack exchange，提问作者Suvam Ray