CODEWITHSUNDEEP
javascripthtmlreactjsreact-three-fiberreact-three-drei
jernst146
jernst146

Reputation: 1

Why do I get "The tag <primitive> is unrecognized in this browser"

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.

Upvotes: 0

Views: 515

Answers (2)

Jaismeen
Jaismeen

Reputation: 1

I solved this issue by replacing export default Computers with export default ComputersCanvas

Upvotes: 0

reda falhi
reda falhi

Reputation: 11

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.

Upvotes: 0

Related Questions