Adding gatsby-plugin-typescript to GatsbyJS "React is not defined"

Question

I created the hello world GatsbyJS application and then added the typescript plugin and I immediately got the error "React is not defined". I went through the steps of adding "import * as React from 'react'"; but I still have the same error being thrown in /cache/app.js. I am not sure about the next steps.

Hello world GatsybyJS: https://www.gatsbyjs.org/tutorial/part-zero/#create-a-gatsby-site

Adding Typescript: https://www.gatsbyjs.org/packages/gatsby-plugin-typescript/?=by-config.js

Has anyone had this same issue?

Answer 1

In my case, I ran into this problem when I configured the typescript like this:

  plugins: [
    {
      resolve: `gatsby-plugin-typescript`,
      options: {
        isTSX: true, // defaults to false
        jsxPragma: `jsx`, // defaults to "React"
        allExtensions: true, // defaults to false
      },
    },
    // (continues...)
  ]

I changed into the default plugin:

  plugins: [
    `gatsby-plugin-typescript`,
    // (continues...)
  ]

This fixed the problem for me.

I found this fix from following article: https://github.com/ChristopherBiscardi/gatsby-mdx/issues/358

Answer 2

This configuration in the page on adding Typescript to Gatsby

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-typescript`,
        options: {
          isTSX: true, // defaults to false
          jsxPragma: `jsx`, // defaults to "React"
          allExtensions: true, // defaults to false
        },
     },
  ],
}

If you change this line

jsxPragma: `jsx`,

to

jsxPragma: `React`,

your code will work.