TypeError when using react-syntax-highlighter

[lonkaars]

Subject of the issue

I get this error when I try to use react-syntax-highlighter with react-markdown:

TypeError: Cannot read property 'children' of undefined
    at mergeNodeChildren (.../node_modules/react-markdown/lib/ast-to-react.js:246:16)
    at getNodeProps (.../node_modules/react-markdown/lib/ast-to-react.js:206:40)
    at astToReact (.../node_modules/react-markdown/lib/ast-to-react.js:37:19)
    at .../node_modules/react-markdown/lib/ast-to-react.js:42:14
    at Array.map (<anonymous>)
    at resolveChildren (.../node_modules/react-markdown/lib/ast-to-react.js:41:43)
    at astToReact (.../node_modules/react-markdown/lib/ast-to-react.js:38:73)
    at .../node_modules/react-markdown/lib/react-markdown.js:48:12
    at Array.forEach (<anonymous>)
    at ReactMarkdown (.../node_modules/react-markdown/lib/react-markdown.js:47:40)
    at ReactMarkdownWithHtml (.../node_modules/react-markdown/lib/with-html.js:13:10)
    at processChild (.../node_modules/react-dom/cjs/react-dom-server.node.development.js:3353:14)
    at resolve (.../node_modules/react-dom/cjs/react-dom-server.node.development.js:3270:5)
    at ReactDOMServerRenderer.render (.../node_modules/react-dom/cjs/react-dom-server.node.development.js:3753:22)
    at ReactDOMServerRenderer.read (.../node_modules/react-dom/cjs/react-dom-server.node.development.js:3690:29)
    at renderToString (.../node_modules/react-dom/cjs/react-dom-server.node.development.js:4298:27)

It looks like an internal react-markdown error so I figured this is the right place to submit this issue

Your environment

• OS: Arch Linux (kernel 5.11.13)
• Packages:
  typescript@4.2.3
  react-markdown@5.0.3
  react-syntax-highlighter@15.4.3
  next@10.0.9
  react@17.0.2
• Env: Node 15.14.0, yarn 1.22.10, Brave (chromium) 89.0.4389.114

Steps to reproduce

import gfm from 'remark-gfm';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';

export function RenderedArticle(props: { content: string; }) {
	return <ReactMarkdownWithHTML
		plugins={[gfm]}
		allowDangerousHtml
		children={props.content}
		renderers={{
			code: (props: {
				language: string;
				value: ReactNode;
			}) {
				return <SyntaxHighlighter language={props.language} children={props.value}/>;
			}
		}}
	/>;
}

Expected behavior

The code should compile fine and display beautiful highlighted code ✨

Actual behavior

TypeError: Cannot read property 'children' of undefined :(

[wooorm]

What text are you passing?

[lonkaars]

I tried console.log()ing the props, but they're both undefined inside the custom code renderer. The input should be:

```py
# api/tests/example.py
from flask import Blueprint

example = Blueprint('example', __name__)

@example.route('/example')
def index():
	# python dictionaries are automatically converted to JSON by flask
    return {"hello": "world"}, 200 # flask returns http code 200 by default if no code is explicitly defined

# define a `dynamic_route` variable at the end of your endpoint definition file
# dynamic_route[0] is the namespace
# dynamic_route[1] is your flask.Blueprint
dynamic_route = ["/tests", status]

# this endpoint will be routed to /tests/example
#                                  \___/ \_____/
#                                    |      |
#                                    |      endpoint (defined by the @Blueprint.route() decorator)
#                                    |
#                                    namespace (defined in dynamic_route variable)
\```

I don't think this has anything to do with props being redefined inside the code renderer, because it's also undefined when the code renderer is moved to a seperate function. I've also tried calling the <SyntaxRenderer> component directly with the same results.

[wooorm]

Probably the old broken HTML parser. So this should be fixed by #563, which’ll land soon, as a major new version

[lonkaars]

Thanks! Is there any way I could update to the new html parser? I read about a new upcoming release in the readme, but can I just yarn upgrade react-markdown --latest, or are there more steps involved?

[wooorm]

Going to release it today/tomorrow or so. First have to think if there should be some more things landing with it

[wooorm]

Released!

[jahirfiquitiva]

@lonkaars @wooorm

Would you mind helping me to fix this? I started using React Syntax Highlighter and now the inline code looks like this:

But I was expecting it to look like this

Here's the code snippets:

const CodeRenderer = (props: any) => {
  return <SyntaxHighlighter language={props.language} style={dracula}>
    {props.children}
  </SyntaxHighlighter>;
};

<ReactMarkdown
  plugins={[gfm]}
  components={{
    // @ts-ignore
    // eslint-disable-next-line react/display-name
    code: ({ node, ...props }) => <CodeRenderer {...props} />,
  }}>
  {mdBody}
</ReactMarkdown>

[wooorm]

Please see the readme, it has examples: https://github.com/remarkjs/react-markdown#use-custom-components-syntax-highlight