React is not defined - when using Fragment JSX syntax(<>) in MDX with TypeScript

Description

I get the error : React is not defined when using Fragment JSX syntax(<></>) inside an mdx file when using gatsby-plugin-typescript (Bug originally reprorted here : https://github.com/doczjs/docz/issues/1270)

Steps to reproduce

Repo with repro : https://github.com/rakannimer/gatsby-typescript-mdx-fragment-bug

How to reproduce :

1. gatsby new mdx-gatsby
2. cd mdx-gatsby
3. yarn add gatsby-plugin-mdx @mdx-js/mdx @mdx-js/react
4. Configure gatsby-plugin-mdx in gatsby-config :

{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `pages`,
    path: `${__dirname}/src/pages/`,
  },
},
`gatsby-plugin-mdx`

1. yarn add gatsby-plugin-typescript

2. Configure typescript:

{
  resolve: "gatsby-plugin-typescript",
  options: {
    isTSX: true,
    allExtensions: true,
  },
}

1. Create index.mdx file in pages and inside it put :

Hello

<><h2>Hi</h2></>

Expected result

It should not throw when using React Fragment JSX syntax.

Actual result

Getting React is not defined

Environment

System: OS: macOS Mojave 10.14.5 CPU: (8) x64 Intel® Core™ i7-4870HQ CPU @ 2.50GHz Shell: 3.2.57 - /bin/bash Binaries: Node: 10.16.0 - /var/folders/jn/3z685bls0mv64x4q1vjrzgy40000gn/T/yarn–1575970448966-0.5917283699676961/node Yarn: 1.17.3 - /var/folders/jn/3z685bls0mv64x4q1vjrzgy40000gn/T/yarn–1575970448966-0.5917283699676961/yarn npm: 6.9.0 - ~/.nvm/versions/node/v10.16.0/bin/npm Languages: Python: 2.7.10 - /usr/bin/python Browsers: Chrome: 78.0.3904.108 Firefox: 70.0.1 Safari: 12.1.1 npmPackages: gatsby: ^2.18.4 => 2.18.4 gatsby-image: ^2.2.34 => 2.2.34 gatsby-plugin-manifest: ^2.2.30 => 2.2.30 gatsby-plugin-mdx: ^1.0.59 => 1.0.59 gatsby-plugin-offline: ^3.0.24 => 3.0.24 gatsby-plugin-react-helmet: ^3.1.16 => 3.1.16 gatsby-plugin-sharp: ^2.3.4 => 2.3.4 gatsby-plugin-typescript: ^2.1.20 => 2.1.20 gatsby-source-filesystem: ^2.1.39 => 2.1.39 gatsby-transformer-sharp: ^2.3.6 => 2.3.6

[rogeliorv]

Bumping this. Still happening.

In the meanwhile when you get “React is not defined” when using Typescript you can use either <React.Fragment> tag or <div> as a workaround.

[kara-ryli]

I ran into this issue when upgrading to React 17 and TS 4, and could work around it with adding import React from "react" in all of my MDX files.