Black Screen | Div is not recognized!

[kamawallsec]

Hi. I am getting these errors. Please help!

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)

The above error occurred in the <ForwardRef(Canvas)> component:

at Canvas (http://localhost:5173/node_modules/.vite/deps/chunk-Z4ST2AXC.js?v=18e02788:48214:3)
at FiberProvider (http://localhost:5173/node_modules/.vite/deps/chunk-Z4ST2AXC.js?v=18e02788:48078:21)
at CanvasWrapper
at SoulCanvas
at section
at Hero
at div
at div
at Router (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=94c5b88f:3421:15)
at BrowserRouter (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=94c5b88f:3839: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

[ghost]

Yes getting same issue

[Indu-Chandana]

Move the suspense block outside the canvas. https://discourse.threejs.org/t/uncaught-error-r3f-div-is-not-part-of-the-three-namespace-did-you-forget-to-extend/48783

[franciscof12]

Did you solve it?

[kamawallsec]

Guys continue to watch the video. In a Loader component wrapping everything to the Html tag solves the issue.

[franciscof12]

Okay, tysm

[mdrahbar21]

while importing Link from react-router-dom, and using it in the Navbar... use the same case... Remember, here L is in uppercase.