Client and server mdx do not match paragraphs

[switz]

client-server-mdx.mov

See the flicker above as the client side rendering hydrates

MDX:

I spent a decade consulting on projects for a variety of companies<Footnote index={1} content={<Box width={240}>
  such as...
</Box>}>hi</Footnote>&nbsp;at every stage, focusing largely on frontend, product, and UX.

This is what my code looks like. On the server it renders the footnote as a separate paragraph. On the client, it overtakes it and renders it properly.

Serverside:

Clientside:

[ChristianMurphy]

@switz what are you using to render MDX server-side? Gatsby? Next.js? Something else?
What version(s) of MDX are you using?
Could you share a runnable example of the issue you are seeing? https://codesandbox.io is a good platform for sharing client/serverside examples

[switz]

I'm using nextra/next.js.

Nextra is running on @mdx-js/loader@^2.0.0-next.9 currently. I can't put a sandbox together this second, but I'll try to make one soon.

[ChristianMurphy]

Sounds good, at the same time it may be worth upgrading from the 2.0 pre-release to the stable/generally available release https://github.com/mdx-js/mdx/releases/tag/2.0.0