Passing elements wrapped with the short syntax of React.Fragment into a component as its children may cause a page to crash

[ghost]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

For example, if I have a component like this:

const TestComponent = ({ children }) => {
  const [a, b] = children;

  return (
    <div>
      <div>{a}</div>
      <div>{b}</div>
    </div>
  );
};

Then I import this component in a doc and use the component like this:

import TestComponent from "../src/components/TestComponent"

<TestComponent>

<>a</>

<>b</>

</TestComponent>

I'll get this error:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of `MDXContent`.

Reproducible demo

https://github.com/awesomeraccoons/docusaurus/blob/main/docs/intro.md?plain=1

Steps to reproduce

1. Create a component that takes in a children prop and renders the elements in the children.
2. Import this component in a doc and pass elements wrapped with <></> into an instance of it.

Expected behavior

The page renders correctly as if the <></> was written in the form of <React.Fragment></React.Fragment>.

Actual behavior

The page crashes with the following error:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of `MDXContent`.

Your environment

• Public source code: https://github.com/awesomeraccoons/docusaurus
• Public site URL: N/A
• Docusaurus version used: 2.0.0-beta.20
• Environment name and version (e.g. Chrome 89, Node.js 16.4): Chrome 101.0.4951.54
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): macOS 12.3.1

Self-service

• I'd be willing to fix this bug myself.

[Josh-Cena]

For some reason, the mdx.Fragment in fragment JSX pragma is not present.