Docz: React is not defined - when using Fragment JSX syntax(<>) inside Playground with `typescript: true`

[aibolik]

Bug Report

Describe the bug

I get error React is not defined when using Fragment JSX syntax(<></>) inside Playground component and with typescript: true in doczrc.js.

To Reproduce

Here is a reproduction with docz basic example. This file

or steps:

1. create-docz-app my-docz-app && cd my-docz-app
2. add typescript: true in doczrc.js
3. in Alert.mdx wrap Alert component inside Playground with React Fragment using JSX syntax:

<Playground>
  <>
    <Alert>Some message</Alert>
  </>
</Playground>

1. Run npm run docz dev
2. See error in browser

ReferenceError: React is not defined

Expected behavior

Component renders without errors in React Fragment with JSX syntax.

Environment

• docz version: [e.g. 2.0.0-rc.75]
• OS: [e.g. OSX 10.14.16]
• Node/npm version: 10.16.3/6.9.0

Additional context/Screenshots

It works if I use React.Fragment and works if typescript options is not set to true. TypeScript should already come with the support for JSX fragment syntax starting from 2.6.2, according to docs here. Maybe it is related to how Playground parses the code. 🤷‍♂

Here is a screenshot from browser error:

[techniq]

I'm seeing this as well, and switched to using React.Fragment for now.

[rakannimer]

Thanks for reporting !

This looks related to Gatsby, I opened an issue for it here : https://github.com/gatsbyjs/gatsby/issues/20030

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[aibolik]

Hey, should it still stay active until the related issue in Gatsby not resolved?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[rogeliorv]

Still happening in August 2020