ReactMarkdown fails when using in combination with rehype-raw

[ConstantinChirila]

Initial checklist

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

Affected packages and versions

react-markdown: 8.0.3, rehype-raw: 6.1.1

Link to runnable example

https://codesandbox.io/s/upbeat-field-uj0lid?file=/src/App.js

Steps to reproduce

I've been trying to make markdown render MDX html and jsx tags using rehype-raw and i get the following error:
Cannot compile 'html' node.
Basically i followed the example laid out in the documentation:

Here is a simple example:

import ReactMarkdown from "react-markdown";
import rehypeRaw from "rehype-raw";

export default function App() {
  return (
    <div>
      <ReactMarkdown children={`<p>test</p`} remarkPlugins={[rehypeRaw]} />
    </div>
  );
}

Link to CodeSandbox example

I've also asked a question on Stack overflow

Expected behavior

I expect it to work as intended and render html tags instead of rendering them as string.

Actual behavior

It throws an error Cannot compile 'html' node.

Runtime

No response

Package manager

No response

OS

No response

Build and bundle tools

No response

[wooorm]

It's a rehype plugin. Not a remark plugin. Rehype plugins go in rehypePlugins. Remark plugins go in remarkPlugins

[github-actions]

Hi team! Could you describe why this has been marked as wontfix?

Thanks,
— bb

[ConstantinChirila]

@wooorm Thank you so much! Typical dev mistake haha 😅

[kirs]

I'm hitting the same issue and I'm very curious if anyone worked around it.

I'm using examples from react-markdown's readme which fails:

import React from 'react'
import ReactDom from 'react-dom'
import ReactMarkdown from 'react-markdown'
import rehypeRaw from 'rehype-raw'

const input = `<div class="note">

Some *emphasis* and <strong>strong</strong>!

</div>`

ReactDom.render(
  <ReactMarkdown rehypePlugins={[rehypeRaw]} children={input} />,
  document.body
)

[ChristianMurphy]

@kirs sorry you ran into a spot of trouble.
The issue you are seeing is not the same as the one in this tread.
And is unlikely to be an issue in react-markdown, testing in a clean sandbox, the combo is still working.
Here is a sandbox with a runnable example: https://codesandbox.io/s/hardcore-fire-w31fjx?file=/src/app.tsx

I'm going to keep this thread closed, and lock it, as it is already resolved in #696 (comment)

If you'd like help debugging your setup, feel free to open a Q&A thread https://github.com/orgs/remarkjs/discussions/categories/q-a
With relevant details of your setup, build tools, dependency versions, and ideally a sandbox (consider forking the one provided above).
Folks are happy to help.