Why is rendered output wrapped in a <span>?

[chunfeilung]

First of all, thanks for making next-mdx-remote; this makes my life so much easier!

One thing I did notice is that hydrate.js wraps the renderedOutput in a span element:

React.createElement('span', {
  dangerouslySetInnerHTML: {
    __html: renderedOutput,
  },
})

Because the renderedOutput may include block-level elements – which are technically not allowed within inline elements like span – the resulting HTML will often be invalid. As far as I can tell this does not cause any actual issues, but it does make me wonder whether this is a bug or a feature. 😄

[jescalan]

Good question! It has to be rendered into something, and we can't render it into a fragment, so it was just an arbitrary choice. I would be fine with changing it to a div, but that could also cause problems if your content was intended to be inline, was the theory. Although with an mdx file, I'm not even sure if its possible to generate inline content, so maybe a div is the better choice?

I'd welcome a PR either way!

[domitriusclark]

Yeah I think this will cause a constant bloated error message around dangerouslySetInnerHTML not "matching" the server

Dug around a bit and it seems to need a div 🤷‍♂️

Can put up a PR for this if we want?

[domitriusclark]

Just saw there already is a PR 😅

[stevenmunro]

I recommend that this <span> or <div> (when it eventually becomes one) is not automatically removed using Javascript. When applying styles to markdown using a parent .markdown class, I rather the styles got applied even when Javascript is disabled.

[jescalan]

Closed by #34