title: Setting up Gatsby with Typescript causes 'Cannot use JSX unless the '--jsx' flag is provided.'
body: <p>I'm running a Gatsby project and recently tried to implement Typescript to it and I have a error in my TSX files as below:</p>
  
  <blockquote>
    <p>Cannot use JSX unless the '--jsx' flag is provided.</p>
  </blockquote>
  
  <p><strong>What have I tried?</strong>
  I've looked at the documentation and found out that it is due to the JSX not being preserved. So I've tried adding a tsconfig.json file to the root with this flag:</p>
  
  <pre><code>{
    "compilerOptions": {
      "jsx": "preserve",
    }
  }
  </code></pre>
  
  <p>This seemed to not have worked so I also tried to add the config to the gatsby-config.js file as follow:</p>
  
  <pre><code>{
    resolve: 'gatsby-plugin-typescript',
    options: {
      transpileOnly: true, // default
      compilerOptions: {
        target: 'es5',
        experimentalDecorators: true,
        jsx: 'react',
      },
    },
  },
  </code></pre>
  
  <p>Both do not seem to be working and I'm out of ideas to why. The "jsx": "preserve", option in the tsconfig is how I have fixed this in the passed so I was thinking this approach would work. </p>
  
  <p><a href="https://i.stack.imgur.com/OJIJp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OJIJp.png" alt="enter image description here"></a></p>