search

quantizor / markdown-to-jsx

🏭 The most lightweight, customizable React markdown component.
https://markdown-to-jsx.quantizor.dev/
MIT License
2.04k stars 177 forks source link

InvalidCharacterError whilst rendering with Preact (but not React) #507

Open AJamesPhillips opened 1 year ago

AJamesPhillips commented 1 year ago

This errors with Preact but not React so I've posted a potential bug report with Preact. I'm also mentioning it here in case there's something on the Markdown-to-JSX side which is relevant to change as this might be a follow on from #180. I don't know.

Describe the bug Markdown-to-JSX can produce some output that causes Preact to throw an exception.

To Reproduce

https://codesandbox.io/s/upbeat-agnesi-mdh9js?file=/components/app.js

Steps to reproduce the behavior:

  1. Go to link above and see "InvalidCharacterError: String contains an invalid character"
  2. Edit the code to remove the space in the "<s ->" to stop triggering the error.

Error can also show up as "DOMException: String contains an invalid character"

Expected behavior Either not error or a way to catch and gracefully handle that error.

AJamesPhillips commented 1 year ago

Useful investigation by Preact maintainer: https://github.com/preactjs/preact/issues/4083#issuecomment-1653337009

It looks like the markdown parser is materialising <s -> into a HTMLElement tag s with the attribute - == true. Preact only sees the final vnode and when it tries to render that the browser throws the error.