mathieudutour/medium-to-own-blog

Issue With Self-closing Tags In JSX and <br> In Markdown Content

alexfinnarn opened this issue · 3 comments

Describe the bug

I had a bulleted list that used the <br> tag in a sentence, and I got an error while Gatsby compiled. Locally, my blog still finished compiling, but on Netlify it just stopped half-way.

Once I wrapped the line break tag in ticks, <br>, my issue went away.

Expected behavior
A clear and concise description of what you expected to happen.

  • What's the URL of the Medium article it is failing to parse?
  • What part of the article isn't parsed correctly?

alexfinnarn/blog@43e0192#diff-5af09c7cd8da7647ae9977eaa530290dR32

"table with
,"

Screenshots
Screen Shot 2019-06-23 at 7 50 08 PM

I'm still learning more about React, but I think this is a JSX/MDX problem with self-closing tags. To test, I'd have to try <br /> and see if that fixes the parsing error.

indeed, MDX uses a mix of markdown and JSX to render content so if you use <br>, it assumes you meant a JSX element and can't find the closing one so it throws an error.

It works locally but if you go to the article, it should break as well (because it's compiled just in time)

Made a PR for this to add to readme. I think you should merge that in or close the issue. This thread should be good enough for people to get some idea on how to resolve if they encounter the issue.