JSX Components do not work in the middle of Markdown elements

[adueck]

Describe the bug
JSX Components will only render when on their own line. If placed in the middle of, say, a paragraph of markdown text, they either break the page build or are rendered as literal text.

I wasn't sure if this was a limitation in mdx itself so I asked this question, and they confirmed that this should work with version 1 of mdx.

See my snippet from the question here and this snippet below provided by the mdx people. Neither of these work for me with gatsby-mdx.

With gatsby-mdx:

## My mdx file  

The JSX here <span style={{ backgroundColor: "red" }}>breaks the build</span>. Ouch.  

<span style={{ backgroundColor: "red" }}>But on a seperate line it's ok</span>  

mdx version 1 should support both spans...

gatsby-mdx only supports the second one. 

[adueck]

Oops! I just realized that the gatsby-starter-mdx-basic that I cloned a while back just updated to use v1 of mdx. I didn't realize I was using the older one. Sorry!