React Three Fiber mesh is unrecognisable in this browser

Question

I am following a 3D portfolio tutorial on youtube and I get stuck in this error. It says that Warning: The tag is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter. I am trying to render a mesh but the above error gets shown. Here is the full code that I have written after following the tutorial. And as a result of this the 3D model of the computer is not getting rendered in the portfolio website. Here is the total code block in react:

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 = ({ isMobile}) => {
  const computer = useGLTF('./desktop_pc/scene.gltf')
  console.log(computer);
  return (
    <mesh>
      <hemisphereLight intensity={0.15} 
      groundColor="black"/>
      <pointLight intensity={1}/>
      <spotLight
        position={[-20,50,10]}
        angle={0.12}
        penumbra={1}
        intensity={1}
        castShadow
        shadow-map-size={1024}
      />
      <primitive
      object={computer.scene}
      scale={isMobile ? 0.7 : 0.75}
      position={isMobile ? [0,-3,-2.2] : [0,-3.25,-1.5]}
      rotation={[-0.01,-0.2,-0.1]}
      />
    </mesh>
  )
}

const ComputersCanvas = () => {
  const [isMobile,setIsMobile] = useState(false);
  useEffect(() => {
    // Add a listener for changes to the screen size
    const mediaQuery = window.matchMedia("(max-width: 500px)");

    // Set the initial value of the `isMobile` state variable
    setIsMobile(mediaQuery.matches);

    // Define a callback function to handle changes to the media query
    const handleMediaQueryChange = (event) => {
      setIsMobile(event.matches);
    };

    // Add the callback function as a listener for changes to the media query
    mediaQuery.addEventListener("change", handleMediaQueryChange);

    // Remove the listener when the component is unmounted
    return () => {
      mediaQuery.removeEventListener("change", handleMediaQueryChange);
    };
  }, []);
  
  return(
    <Canvas
    frameloop="demand"
    shadows
    camera={{position: [20,3,5], fov: 25}}
    gl={{preserveDrawingBuffer: true}}
    >
      <Suspense fallback={<CanvasLoader/>}>
        <OrbitControls 
        enableZoom={false}
        maxPolarAngle={Math.PI/2}
        minPolarAngle={Math.PI/2}
      /> {/* OrbitControls Allows us to rotate the model, and min and maxPolarAngle help to rotate at specific angle*/}
      <Computers isMobile={isMobile}/>
      </Suspense> {/* adds a loader while the 3d model is loading*/}
      <Preload all/>
    </Canvas>
  )
}

export default Computers

I am also getting the following errors:

Warning: The tag is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
Warning: is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
Warning: The tag is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
Warning: React does not recognize the groundColor prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase groundcolor instead. If you accidentally passed it from a parent component, remove it from the DOM element. Warning: is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
Warning: The tag is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
Warning: is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
Warning: The tag is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter. Warning: React does not recognize the castShadow prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase castshadow instead. If you accidentally passed it from a parent component, remove it from the DOM element.
Warning: The tag is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
Warning: The tag is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

Can anyone please solve the issue? I am trying hard but am not able to find the fix since the last 3 days.

React Three Fiber mesh is unrecognisable in this browser

0 Answers0