rehype-react

rehype-react copied to clipboard

Initial checklist

• [X] I read the support docs
• [X] I read the contributing guide
• [X] I agree to follow the code of conduct
• [X] I searched issues and couldn’t find anything (or linked relevant results below)

Affected packages and versions

rehype-react@latest

Link to runnable example

https://codesandbox.io/s/rehype-react-bug-szj7g

Steps to reproduce

I have included a link (you may have to reload the browser page). If we comment out line 28, the extra div will disappear.

components: {
  div: (props) => createElement("div", props) // try to remove this line
}

Note that there are no div elements in the source HTML.

Expected behavior

The div element should not be created.

Actual behavior

The div element is created.

Runtime

Node v16

Package manager

npm v7

OS

Windows

Build and bundle tools

Parcel, Next.js

Yep. See: https://github.com/rehypejs/rehype-react/blob/f37d25d121217cb4734039d85e6051eca49d8900/lib/index.js#L61.

How is it a problem though?

I expected the source HTML and result HTML to be the same. It looks like a side-effect to me. After all, a wrapping element is being implicitly created that shouldn't exist. Maybe there should be a Fragment in place of the div. 🤔

I was surprised to see that the root node gets passed to options.components.div and had to debug this.

Maybe there should be a Fragment in place of the div.

The Fragment is optional. Did you see the code? The underlying project can only handle elements and text. So a div is created for the root. The code tries to change that to a fragment, but because you pass a component it’s no longer a simple div

I get it’s unexpected, just not sure how to do anything about it

solved in https://github.com/rehypejs/rehype-react/releases/tag/8.0.0