Black screen. Please help me out!

[Maynak2001]

Console :-

react-dom.development.js:86 Warning: React does not recognize the frameLoop prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase frameloop instead. If you accidentally passed it from a parent component, remove it from the DOM element. at div at Canvas (http://localhost:5173/node_modules/.vite/deps/chunk-H2SXTSQU.js?v=1d7891e2:18482:3) at FiberProvider (http://localhost:5173/node_modules/.vite/deps/chunk-H2SXTSQU.js?v=1d7891e2:18338:21) at CanvasWrapper at ComputersCanvas at section at Hero at div at div at Router (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=1d7891e2:3491:15) at BrowserRouter (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=1d7891e2:3940:5) at App printWarning @ react-dom.development.js:86 react-reconciler.development.js:9747 The above error occurred in the

component:

at div
at Loader
at Suspense
at Suspense
at ErrorBoundary (http://localhost:5173/node_modules/.vite/deps/chunk-H2SXTSQU.js?v=1d7891e2:16593:5)
at FiberProvider (http://localhost:5173/node_modules/.vite/deps/chunk-H2SXTSQU.js?v=1d7891e2:18338:21)
at Provider (http://localhost:5173/node_modules/.vite/deps/chunk-H2SXTSQU.js?v=1d7891e2:17940:3)

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary. logCapturedError @ react-reconciler.development.js:9747 2react-three-fiber.esm.js:144 Uncaught Error: R3F: Div is not part of the THREE namespace! Did you forget to extend? See: https://docs.pmnd.rs/react-three-fiber/api/objects#using-3rd-party-objects-declaratively at createInstance (index-22ee0173.esm.js:35:15) at completeWork (react-reconciler.development.js:10851:28) at completeUnitOfWork (react-reconciler.development.js:18725:16) at performUnitOfWork (react-reconciler.development.js:18697:5) at workLoopSync (react-reconciler.development.js:18597:5) at renderRootSync (react-reconciler.development.js:18565:7) at recoverFromConcurrentError (react-reconciler.development.js:17948:20) at performConcurrentWorkOnRoot (react-reconciler.development.js:17848:22) at workLoop (scheduler.development.js:266:34) at flushWork (scheduler.development.js:239:14) react-dom.development.js:18687 The above error occurred in the <ForwardRef(Canvas)> component:

at Canvas (http://localhost:5173/node_modules/.vite/deps/chunk-H2SXTSQU.js?v=1d7891e2:18482:3)
at FiberProvider (http://localhost:5173/node_modules/.vite/deps/chunk-H2SXTSQU.js?v=1d7891e2:18338:21)
at CanvasWrapper
at ComputersCanvas
at section
at Hero
at div
at div
at Router (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=1d7891e2:3491:15)
at BrowserRouter (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=1d7891e2:3940:5)
at App

Consider adding an error boundary to your tree to customize error handling behavior. Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries. logCapturedError @ react-dom.development.js:18687 react-dom.development.js:26923 Uncaught Error: R3F: Div is not part of the THREE namespace! Did you forget to extend? See: https://docs.pmnd.rs/react-three-fiber/api/objects#using-3rd-party-objects-declaratively at createInstance (index-22ee0173.esm.js:35:15) at completeWork (react-reconciler.development.js:10851:28) at completeUnitOfWork (react-reconciler.development.js:18725:16) at performUnitOfWork (react-reconciler.development.js:18697:5) at workLoopSync (react-reconciler.development.js:18597:5) at renderRootSync (react-reconciler.development.js:18565:7) at recoverFromConcurrentError (react-reconciler.development.js:17948:20) at performConcurrentWorkOnRoot (react-reconciler.development.js:17848:22) at workLoop (scheduler.development.js:266:34) at flushWork (scheduler.development.js:239:14) three.module.js:1491 THREE.Texture: Property .encoding has been replaced by .colorSpace. warnOnce @ three.module.js:1491 three.module.js:28217 THREE.WebGLRenderer: Context Lost.

black screen :-

Code :-

import { 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 Computers = 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 />

) }

export default ComputersCanvas

[kotzimop]

Remove fallback

[Maynak2001]

Remove fallback

nothing changed !

[BrianaPass]

Delete

fallback={<CanvasLoader />} in computers.jsx file.

then run npm run dev its a syntax error causing all the other errors in the dev tools

[Hypotech]

frameloop should be all lowercase and not frameLoop

[AggarwalNeelesh]

In my case it was mainly occuring because I was reloading browser again and again to see changes, and in console it was showing that context is lost.

So don't reload browser, and make some changes in code( Let say add a space anywhere), The code will rerender, and you will be able to see the 3D object.

and yes , wrap the Canvas component in <> </>

[fenan-yosef]

still not working for me too