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

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

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

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

Solution

hey you have to put this code in the Loader.jsx component:

import React from 'react';
import { Html, useProgress } from '@react-three/drei';

const Loader = () => {
  const {progress} = useProgress();
  return (
    <Html>
      <span
        className='canvas-load'
      >

      </span>
      <p
        style={{
          fontSize: 14,
          color: '#f1f1f1',
          fontWeight: 800,
          marginTop: 40
        }}

      >
        {progress.toFixed(2)}%
      </p>
    </Html>
  )
}

export default Loader