🐛 BUG: React children surrounded by empty <p> tags

[pReya]

What version of astro are you using?

1.0.0-beta.27

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

npm

What operating system are you using?

Mac

Describe the Bug

I have the following, very simple React component:

const TextBlock = ({
  title,
  children,
  noPadding = false,
}) => {
  return (
    <div
      className={`${
        noPadding ? "" : "md:px-2 lg:px-4"
      } flex-1 prose prose-headings:font-grotesk`}
    >
      <h3>{title}</h3>
      <p>{children}</p>
    </div>
  );
};

I am using this component in the following way inside a page.md page:

  <TextBlock title="Eintritt/Hinweise" noPadding>
    <ul class="not-prose">
      <li>Eintritt frei</li>
      <li>Anmeldung erforderlich</li>
      <li>Teilnehmerzahl begrenzt</li>
    </ul>
  </TextBlock>

However, the actual children (which is the <ul> element) are not being rendered correctly inside the {children} variable inside the React component. Instead, they are surrounded with empty <p></p> tags instead of being INSIDE the <p></p> tags. Here is the actual DOM output:

<div class="flex-1 prose prose-headings:font-grotesk">
    <h3>Eintritt/Hinweise</h3>
    <p></p>
    <ul class="not-prose">
      <li>Eintritt frei</li>
      <li>Anmeldung erforderlich</li>
      <li>Teilnehmerzahl begrenzt</li>
    </ul>
    <p></p>
</div>

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-b7imzh?file=src/pages/index.astro

Participation

• I am willing to submit a pull request for this issue.

[natemoo-re]

Sorry for the frustration! This is definitely an issue with our Markdown rendering, likely coming from the default either remark or rehype behavior.

If possible, we should be removing empty <p></p> tags.

[Msteimel]

I have recently run into the same (or at least very similar) issue using an .mdx file from a content folder.

When the element tags are on their own line, they cause empty p tags to render

Code:

<p>Deserunt duis commodo commodo nulla id adipisicing aliquip.</p>
<p>
  Deserunt duis commodo commodo nulla id adipisicing aliquip.Voluptate ea
  reprehenderit proident culpa pariatur commodo laboris anim culpa culpa laboris
  do ad est laboris.
</p>

What renders

<p>Deserunt duis commodo commodo nulla id adipisicing aliquip.</p>
<p></p>
<p>Deserunt duis commodo commodo nulla id adipisicing aliquip.Voluptate ea
reprehenderit proident culpa pariatur commodo laboris anim culpa culpa
laboris do ad est laboris.</p>
<p></p>

[mleister97]

Same issue here... so many empty paragraph elements