Uncaught Error: R3F: Div is not part of the THREE namespace! Did you forget to extend

Questions
1 
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 ComputersCanvas;

i have not use any div inside canvas and when i do extend({OrbitControls, Preload, useGLTF}) as the documention says then also error comes as extended is not defined . i am not able to solve the error as i am new to three.js

1 Like