Markdown content of custom MDX component isn't parsed if empty line isn't present

[jonathanlinat]

Subject of the issue

Depending how assigned child is, Markdown parsing breaks in a specific case.

Your environment

• OS: Ubuntu 20.04 LTS
• Packages: [email protected], [email protected], @mdx-js/[email protected]
• Env: Node v12.19.0 / NPM v6.14.8

Actual behavior

I have a custom MDX component called MessageBox. This is basically a component that renders assigned child.

In that case, it doesn't work.

<MessageBox>
  This tutorial is designed for people who prefer to **learn by doing**. If you prefer learning concepts from the ground up, check out our [step-by-step guide](https://reactjs.org/docs/hello-world.html). You might find this tutorial and the guide complementary to each other.
</MessageBox>

In that one, it does (??)

<MessageBox>

  This tutorial is designed for people who prefer to **learn by doing**. If you prefer learning concepts from the ground up, check out our [step-by-step guide](https://reactjs.org/docs/hello-world.html). You might find this tutorial and the guide complementary to each other.
</MessageBox>

This is the component source code:

const MessageBox = (props) => (
  <div>{props.children}</div>
)

Expected behaviour

I don't want to have to add an empty line immediately after the first tag in order to have Markdown parsed as expected.

[ChristianMurphy]

This isn't a bug, this is how Markdown/JSX interleaving works in version 1.
MDX 2 (#1041) adds support for some types of inline interleaving (no newline required) of markdown in jsx (#628).
Give version 2 a try and see if it fits your needs.