The React Three Fiber mesh tag is unrecognized in this browser

Question

I am following a 3d portfolio tutorial from Youtube and got caught in this error. Here I am trying to render a mesh but the console is showing a warning that "This element is unrecognized in this browser". The browser is rendering the rest but this part of the code is not getting rendered. Here is the code block:

const Computers = () => {
    const computer = useGLTF("./desktop_pc/scene.gltf");
    console.log(computer);
    return (
        <mesh>
            <hemisphereLight intensity={0.15} groundColor="black" />
            <pointLight intensity={1} />
            <primitive
                object={computer.scene}
                scale={0.75}
                position={[0, -3.25, 1.5]}
                rotation={[-0.01, -0.2, -0.1]}
            />
        </mesh>
    );
};

const ComputersCanvas = () => {
    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}
                />
                <Computers />
            </Suspense>
            <Preload all />
        </Canvas>
    );
};
export default Computers;

And these are the warnings I am getting

Warning: <hemisphereLight /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
Warning: The tag <hemisphereLight> 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: <pointLight /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements
Warning: The tag <pointLight> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
Warning: The tag <primitive> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
Warning: The tag <mesh> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

Can anyone please solve this issue. Thanks!!

score 11 · Accepted Answer · edited Mar 20 '23 at 02:37

11

Same error happened for me, this is how I fixed it.

You are currently doing export default Computer Update that to export default ComputerCanvas and that should fix it.

edited Mar 20 '23 at 02:37

Qwerty

578
1
5
31

answered Mar 06 '23 at 22:22

Bianca Goncalves

126
1
2

score 6 · Answer 2 · answered Mar 10 '23 at 14:39

You are currently doing export default Computer. Update that to export default ComputerCanvas

then if you have !created CanvasLoader already it gives -- index-bb759d07.esm.js:215 Text is not allowed in the R3F tree! This could be stray whitespace or characters.

so try removing fallback={<CanvasLoader />, this fix all the errors

score 4 · Answer 3 · answered Apr 13 '23 at 18:42

Removing fallback={<CanvasLoader /> from <Suspense fallback={<CanvasLoader />}> fixed all my issues including the refresh problem with the computer object.
make sure to use export default ComputersCanvas; in place of export default Computers;

score 1 · Answer 4 · answered Jul 26 '23 at 13:04

A simple fix was to update the CanvasLoader component as shown below. Most importantly, change the export.

import { useProgress, Html } from "@react-three/drei";
const CanvasLoader = () => {
  const { progress } = useProgress();
  return (
    <Html>
      <span className="canvas-load"></span>
      <p
        style={{
          fontSize: 14,
          color: "#f1f1f1",
          fontWeight: 800,
          marginTop: 40,
        }}
      >
        {progress.toFixed(0)}%
      </p>
    </Html>
  );
};

export default CanvasLoader;

score 0 · Answer 5 · edited Aug 25 '23 at 19:40

I made some changes in the code like this:

const ComputersCanvas = () => {
  return (
    <Canvas
      frameloop="demand"
      shadows
      camera={{ position: [20, 3, 5], fov: 25 }}
      gl={{ preserveDrawingBuffer: true }}
    >
      <Suspense>
        <OrbitControls
          enableZoom={false}
          maxPolarAngle={Math.PI / 2}
          minPolarAngle={Math.PI / 2}
        />
        <Computers />
      </Suspense>
      <Preload all />
    </Canvas>
  );
};

export default ComputersCanvas;

I noticed that particulary this part:

<Suspense fallback={<CanvasLoader />}>

Also gave an error. If you write it without the space after the CanvasLoader, it stops working.

To fix this you will need to adjust the loader like so:

import { Html, useProgress } from "@react-three/drei";

const Loader = () => {
  const { progress } = useProgress();

  return (
    <Html>
      <span className="canvas-loader"></span>
      <p>{progress.toFixed(2)}%</p>
    </Html>
  );
};

export default Loader;

The React Three Fiber mesh tag is unrecognized in this browser

5 Answers5

Linked