Div is not part of the THREE namespace!

[cyango]

Hi

I'm learning R3F, but I can't seem to understand why this strange behavior happens. I have:

... <div className={classes.body}> <div id="" className={classes.view} > <View /> ...

and other component with all the Canvas related stuff:

const View =()=>{

return(  
<Canvas>
                    <PerspectiveCamera ref={cameraRef} makeDefault position={[0, 0, 0]} zoom={1} />
                    <Controls></Controls>
                    <mesh>
                      <meshBasicMaterial></meshBasicMaterial>
                      <boxGeometry></boxGeometry>
                    </mesh>          
 </Canvas>

const Controls = () => {
  const scene = useThree((state) => state.scene);

  return (
    <>
      {/* @ts-ignore */}
      <TransformControls object={scene.getObjectByName('ola')} mode={'translate'} />
      <OrbitControls makeDefault minPolarAngle={Math.PI / 2} maxPolarAngle={Math.PI / 2} minDistance={0} maxDistance={10} />
    </>
  );
};

This gives me this error:
"react-three-fiber.esm.js:1487 Uncaught Div is not part of the THREE namespace! Did you forget to extend?"

Why is this? I'm not even using a Div inside Canvas.... Am I missing some key concept here?
Is it because of the React.Fragment tag? What's the best practice?

[joshuaellis]

Do you have a code sandbox you code provide that replicates your issue?

[cyango]

I tried once again right now, I restructured the components to avoid using the React.Fragment. It was indeed the React.Fragment issue. So I assume we can't use these inside Canvas?

[gsimone]

No, you should be able to use fragments, mind making a reproduction on codesandbox?

[drcmda]

making this a discussion for now - the error message is clear, there has got to be a <div> that must have slipped into the canvas.

<Canvas>
  <div>this doesn't belong here</div>
</Canvas>

the message tells you that there is no THREE.Div class available, because that's that putting a div inside canvas would be cast into.

there are no limitations otherwise, <></> or <React.Fragment>, portals, you can use anything that react has to offer.