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

[yukendhiran]

console logs:

index-bb759d07.esm.js:215 Text is not allowed in the R3F tree! This could be stray whitespace or characters. handleTextInstance @ index-bb759d07.esm.js:215 completeWork @ react-reconciler.development.js:10900 completeUnitOfWork @ react-reconciler.development.js:18725 performUnitOfWork @ react-reconciler.development.js:18697 workLoopSync @ react-reconciler.development.js:18597 renderRootSync @ react-reconciler.development.js:18565 performConcurrentWorkOnRoot @ react-reconciler.development.js:17836 workLoop @ scheduler.development.js:266 flushWork @ scheduler.development.js:239 performWorkUntilDeadline @ scheduler.development.js:533 index-bb759d07.esm.js:215 Text is not allowed in the R3F tree! This could be stray whitespace or characters. handleTextInstance @ index-bb759d07.esm.js:215 completeWork @ react-reconciler.development.js:10900 completeUnitOfWork @ react-reconciler.development.js:18725 performUnitOfWork @ react-reconciler.development.js:18697 workLoopSync @ react-reconciler.development.js:18597 renderRootSync @ react-reconciler.development.js:18565 recoverFromConcurrentError @ react-reconciler.development.js:17948 performConcurrentWorkOnRoot @ react-reconciler.development.js:17848 workLoop @ scheduler.development.js:266 flushWork @ scheduler.development.js:239 performWorkUntilDeadline @ scheduler.development.js:533 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-Z4ST2AXC.js?v=53b5e677:46349:5)
at FiberProvider (http://localhost:5173/node_modules/.vite/deps/chunk-Z4ST2AXC.js?v=53b5e677:48078:21)
at Provider (http://localhost:5173/node_modules/.vite/deps/chunk-Z4ST2AXC.js?v=53b5e677:47679:3)

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary. logCapturedError @ react-reconciler.development.js:9747 callback @ react-reconciler.development.js:9815 callCallback @ react-reconciler.development.js:4279 commitUpdateQueue @ react-reconciler.development.js:4300 commitLayoutEffectOnFiber @ react-reconciler.development.js:14877 commitLayoutMountEffects_complete @ react-reconciler.development.js:16290 commitLayoutEffects_begin @ react-reconciler.development.js:16276 commitLayoutEffects @ react-reconciler.development.js:16214 commitRootImpl @ react-reconciler.development.js:18945 commitRoot @ react-reconciler.development.js:18811 finishConcurrentRender @ react-reconciler.development.js:17990 performConcurrentWorkOnRoot @ react-reconciler.development.js:17907 workLoop @ scheduler.development.js:266 flushWork @ scheduler.development.js:239 performWorkUntilDeadline @ scheduler.development.js:533 2index-bb759d07.esm.js:35 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-bb759d07.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) createInstance @ index-bb759d07.esm.js:35 completeWork @ react-reconciler.development.js:10851 completeUnitOfWork @ react-reconciler.development.js:18725 performUnitOfWork @ react-reconciler.development.js:18697 workLoopSync @ react-reconciler.development.js:18597 renderRootSync @ react-reconciler.development.js:18565 recoverFromConcurrentError @ react-reconciler.development.js:17948 performConcurrentWorkOnRoot @ react-reconciler.development.js:17848 workLoop @ scheduler.development.js:266 flushWork @ scheduler.development.js:239 performWorkUntilDeadline @ scheduler.development.js:533 react-dom.development.js:18687 The above error occurred in the <ForwardRef(Canvas)> component:

at Canvas (http://localhost:5173/node_modules/.vite/deps/chunk-Z4ST2AXC.js?v=53b5e677:48214:3)
at FiberProvider (http://localhost:5173/node_modules/.vite/deps/chunk-Z4ST2AXC.js?v=53b5e677:48078:21)
at CanvasWrapper
at ComputersCanvas (http://localhost:5173/src/components/canvas/Computers.jsx?t=1679115222889:59:35)
at section
at Hero
at div
at div
at Router (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=53b5e677:3316:15)
at BrowserRouter (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=53b5e677:3729: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 update.callback @ react-dom.development.js:18720 callCallback @ react-dom.development.js:13923 commitUpdateQueue @ react-dom.development.js:13944 commitLayoutEffectOnFiber @ react-dom.development.js:23391 commitLayoutMountEffects_complete @ react-dom.development.js:24688 commitLayoutEffects_begin @ react-dom.development.js:24674 commitLayoutEffects @ react-dom.development.js:24612 commitRootImpl @ react-dom.development.js:26823 commitRoot @ react-dom.development.js:26682 finishConcurrentRender @ react-dom.development.js:25892 performConcurrentWorkOnRoot @ react-dom.development.js:25809 workLoop @ scheduler.development.js:266 flushWork @ scheduler.development.js:239 performWorkUntilDeadline @ scheduler.development.js:533 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-bb759d07.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) createInstance @ index-bb759d07.esm.js:35 completeWork @ react-reconciler.development.js:10851 completeUnitOfWork @ react-reconciler.development.js:18725 performUnitOfWork @ react-reconciler.development.js:18697 workLoopSync @ react-reconciler.development.js:18597 renderRootSync @ react-reconciler.development.js:18565 recoverFromConcurrentError @ react-reconciler.development.js:17948 performConcurrentWorkOnRoot @ react-reconciler.development.js:17848 workLoop @ scheduler.development.js:266 flushWork @ scheduler.development.js:239 performWorkUntilDeadline @ scheduler.development.js:533 three.module.js:27651 THREE.WebGLRenderer: Context Lost.

[yukendhiran]

my mistake if i continue to canvas loader component i automatically solves

[SevTekky]

any solution to this problem? i'm stuck here

[vrajeshiyengar]

any solution to this problem? i'm stuck here

The issue arises because the "Loader.jsx" component is still not created and has a 'div' element in it as a placeholder. Copy and paste the code from the Loader.jsx file or wait until further in the video where Adrian talks about building the Loader component.

Hope this helps!

[arshbotdev]

any solution to this problem? i'm stuck here

The issue arises because the "Loader.jsx" component is still not created and has a 'div' element in it as a placeholder. Copy and paste the code from the Loader.jsx file or wait until further in the video where Adrian talks about building the Loader component.

Hope this helps!

thanks it really helped