0

I have tried everything I could think off and everything I could find on this problem but I cannot get it to work. VS Code doesn't show any errors, but I keep on getting this warning:

"Warning: The tag is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter. at primitive at Computers at section at Hero at div at div at Router (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=d0415b85:3514:15) at BrowserRouter (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=d0415b85:3963:5) at App"

However, changing the tag primitive to uppercase letter doesn't work as Primitive is not defined in react-three. Belove is my 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 computer = useGLTF('/lowpoly_earth/scene.gltf')

  return (
      <primitive object={computer.scene}/>
  )
} 

const ComputersCanvas = () => {
  return(
    <Canvas
      frameloop="demand"
      shadows
      camera={{ }}
      gl={{ preserveDrawingBuffer: true }}
    >
      <Suspense fallback={<CanvasLoader />}>
        <OrbitControls 
          enableZoom 
          autoRotate
          maxPolarAngle={Math.PI / 2}
          minPolarAngle={Math.PI / 2}
        />
        <Computers />
      </Suspense>

      <Preload all />
    </Canvas>
  )
}

export default Computers

Does anyone have any idea how to solve this? It would be highly appreciated because I can slowly feel my mentality going boom because of this.

jernst146
  • 1
  • That's just how r3f works... where are you getting the warning? – code Jun 16 '23 at 17:33
  • Its the one that is creating the warning. I don't see the warning in VS Code but if I open the console when on localhost it shows me the warning. If I remove I have no errors, but of course, then I can't render the model... – jernst146 Jun 16 '23 at 18:33
  • Check https://stackoverflow.com/questions/69687446/the-tag-primitive-is-unrecognized-in-this-browser – James Jun 16 '23 at 19:13
  • @James I have already looked at this thread and tried the solutions they recommended but none of them worked, but thank you anyways! – jernst146 Jun 17 '23 at 05:58

1 Answers1

0

The warning you are seeing is related to the naming convention of React components. In React, component names should start with an uppercase letter.

The error message suggests that the "primitive" tag you are using is unrecognized in the browser. Since it's not recognized as a React component, React assumes it's a regular HTML element and expects it to start with a lowercase letter, which is why you're seeing the warning.

To resolve this issue, you can create a custom React component for your primitive element instead of using it directly.

reda falhi
  • 13
  • 4