adrianhajdin / project_3D_developer_portfolio

The most impressive websites in the world use 3D graphics and animations to bring their content to life. Learn how to build your own ThreeJS 3D Developer Portfolio today!
https://jsmastery.pro
5.99k stars 1.34k forks source link

<mesh> unrecognizeable #1

Closed genekyle closed 1 year ago

genekyle commented 1 year ago

Full Error: Warning: The tag is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

Found this error within chrome's browser console: This error visually seems to not load the scene.gltf within the computer.jsx component.

I am getting this error along with:

genekyle commented 1 year ago

closing this because some how after adding random import it starts to work again

karangautamin commented 1 year ago

how i got the same problem?

genekyle commented 1 year ago

how i got the same problem?

My actual problem was I forgot to export ComputersCanvas at the very end line, so make sure you're exporting the right function at the end of Computers.jsx or else after you reload it once or twice the canvas won't load in properly

karangautamin commented 1 year ago

yeah its correct but when i try to load the localhost website it shows blank in black colour..In Console i get the following error:-

2index-37bd4d5c.esm.js:1016 Text is not allowed in the R3F tree! This could be stray whitespace or characters. handleTextInstance @ index-37bd4d5c.esm.js:1016 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-GQZEGRTH.js?v=fd224788:46041:5)
at FiberProvider (http://localhost:5173/node_modules/.vite/deps/chunk-GQZEGRTH.js?v=fd224788:48048:21)
at Provider (http://localhost:5173/node_modules/.vite/deps/chunk-GQZEGRTH.js?v=fd224788:47650: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:145 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-37bd4d5c.esm.js:836: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-GQZEGRTH.js?v=fd224788:48186:3)
at FiberProvider (http://localhost:5173/node_modules/.vite/deps/chunk-GQZEGRTH.js?v=fd224788:48048: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=fd224788:3316:15)
at BrowserRouter (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=fd224788: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 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-37bd4d5c.esm.js:836: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) :5173/desktop_pc/scene.gltf:1 Failed to load resource: the server responded with a status of 404 (Not Found) three.module.js:27651 THREE.WebGLRenderer: Context Lost.