Login/Register
The React Three Fiber mesh tag is unrecognized in this browser
Asked Answered
Solved reactjsthree.jsreact-three-fiberreact-three-drei
C

7

8

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

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

Caroleecarolin answered 6/3, 2023 at 20:7 Comment(2)
Why do so many people have the same typo? Was this from a tutorial? – Basel
Yes, looks like it's from this bad tutorial youtube.com/watch?v=0fYi8SGA20k – Cygnet
N
12

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.

Neufer answered 6/3, 2023 at 22:22 Comment(0)
O
6

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

Odeliaodelinda answered 10/3, 2023 at 14:39 Comment(0)
P
5

  1. Removing fallback={<CanvasLoader /> from <Suspense fallback={<CanvasLoader />}> fixed all my issues including the refresh problem with the computer object.

  2. make sure to use export default ComputersCanvas; in place of export default Computers;

Pestana answered 13/4, 2023 at 18:42 Comment(0)
T
1

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;
Timeout answered 26/7, 2023 at 13:4 Comment(0)
S
0

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;
Sabellian answered 23/8, 2023 at 7:52 Comment(0)
S
0

A Simple Answer would be to change

export default Computers

to

export default ComputersCanvas

Shephard answered 23/3 at 10:14 Comment(0)
Y
0

I was following the same tuto and I encountered the same problem. When I commented "fallback={}" (as i saw in the previous answers). So the problem was with the canvas loader , and in fact the export in the Loader.jsx file was "export default Loader" rather than "export default CanvasLoader as it was specified in the import.

Ye answered 2/4 at 10:28 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.