Use as MDX component in Gatsby

[AdamQuadmon]

I did some basic MyCanvas and MyMesh components and they works in a regular Gatsby page.
But if I use them in an .mdx file it won't work, the canvas keep growing in height and setTimeout warning loops in the chrome console.

I tried both adding the components to the @mdx-js/react MDXProvider (https://mdxjs.com/docs/using-mdx/#mdx-provider)
or importing them in the .mdx file but the result is the same.

It was working an year ago with gatsby V2 and react-three-fiber 5.3.17

any clues?

[CodyJasonBennett]

I think this is related to #1684. Maybe you can put the canvas component inside of a parent div with a fixed height or one inherited from a grid?

[AdamQuadmon]

thanks @CodyJasonBennett, actually I already solved the wrapping box part but I'm still unable to add custom components inside the canvas.

a mesh inide MyCanvas works

---
title: My Mdx File
description: this works
---
<MyCanvas>
    <mesh>
        <boxGeometry args={[1, 1, 1]} />
        <meshBasicMaterial color="hotpink" />
    </mesh>
</MyCanvas>

a custom component inside MyCanvas does not work

---
title: My Mdx File
description: this does not works
---
<MyCanvas>
    <MyMesh />
</MyCanvas>

these are my components:

const MyMesh = (props) => {
  return (
    <mesh>
      <boxGeometry args={[1, 1, 1]} />
      <meshBasicMaterial color="hotpink" />
    </mesh>
  )
}
const MyCanvas = ({ children }) => {
  return (
    <Box h="200px" w="100%">
      <Canvas>
        <ambientLight />
        <pointLight position={[10, 10, 10]} />
        {children}
      </Canvas>
    </Box>
  )
}

This is the error:
Div is not part of the THREE namespace! Did you forget to extend

[CodyJasonBennett]

I'd create an issue with mdx-js. Appears to be rendering MyMesh with react-dom before passing it to the Canvas.

[AdamQuadmon]

@CodyJasonBennett it should be an issue with mdx-js

I can add MyCanvas as component to MDXProvider and import MyMesh in the .mdx file

---
title: My Mdx File
description: this finally works
---
import { MyMesh } from "../src/components/MyMesh"
<MyCanvas>
    <MyMesh />
</MyCanvas>

but I can't add MyMesh to MDXProvider as well.

Not a big issue and maybe it is also better to import mesh components only in the .mdx files that need them