Meta description incorrectly capturing JSX code in MDX docs

[MichaelStromberg]

🐛 Bug Report

When investigating the meta description for the docs pages, we observe code fragments rather than something else like a tag line. This often leads to unsatisfying excerpts when pasting content in a chat client like Slack or MatterMost:

There have been other issues that seem to touch on this topic, but the problem remains.

• (v2) Metadata isn't included in build #3330
• Bug (v2): Meta description outputting MDX import statements #2601 (it seems like this issue partially solved the issue - focusing mainly on import statements)

If you look at the page source, you can see how the code ends up in the meta description field:

Not only does this affect our site, but it also affects the normal Docusaurus page. You'll find the same issue if you look at the page source for the Docusaurus Team Page. Here are the links for convenience:

• https://illumina.github.io/NirvanaDocumentation/
• https://v2.docusaurus.io/community/team

The location of my Docusaurus repo is here: https://github.com/Illumina/NirvanaDocumentation

Negative example

If I try the following, everything works as it should:

1. npx @docusaurus/init@next init my-website classic
2. cd my-website
3. npm run build
4. npm run serve
5. view http://localhost:3000/docs/mdx and check page source

In this case we see that the description is set to You can write JSX and use React components within your Markdown thanks to MDX.

We notice that in https://github.com/facebook/docusaurus/blob/master/packages/docusaurus-init/templates/classic/docs/mdx.md, there are no JSX commands that get in the way.

In addition, we see that if description is added to the header of an MDX file, everything is fine:

• https://github.com/facebook/docusaurus/blob/master/website/docs/markdown-features.mdx (original file)
• https://v2.docusaurus.io/docs/markdown-features/#embedding-react-components-with-mdx (to view page source)

Positive example

If we examine the following pages, we see that there are export statements that seem to incorrectly added into the metadata field:

• https://github.com/Illumina/NirvanaDocumentation/blob/master/docs/introduction/introduction.mdx
• https://github.com/facebook/docusaurus/blob/master/website/community/team.md

Have you read the Contributing Guidelines on issues?

YES

To Reproduce

See examples above.

Expected behavior

The expectation is that JSX code will be skipped when extracting the meta description for a given page if one is not already provided in the header.

Actual Behavior

See screenshot above.

For https://illumina.github.io/NirvanaDocumentation/, the description is currently assigned the following:

export function TeamProfileCardCol(props) { return  }

Your Environment

Docusaurus version used: 2.0.0-alpha.66
Environment name and version: Node.js v10.19.0
Operating system and version: Ubuntu 20.04

Reproducible Demo

You can already view the page source for the following MDX pages:

• https://github.com/Illumina/NirvanaDocumentation/blob/master/docs/introduction/introduction.mdx
• https://github.com/facebook/docusaurus/blob/master/website/community/team.md

My repo can be found here: https://github.com/Illumina/NirvanaDocumentation

[slorber]

thanks, should be fixed by #3703

[MichaelStromberg]

That was impressively fast - thank you for the awesome work on Docusaurus!