Setting up Gatsby with Typescript causes 'Cannot use JSX unless the '--jsx' flag is provided.'

Question

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:

Cannot use JSX unless the '--jsx' flag is provided.

What have I tried? 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:

{
  "compilerOptions": {
    "jsx": "preserve",
  }
}

This seemed to not have worked so I also tried to add the config to the gatsby-config.js file as follow:

{
  resolve: 'gatsby-plugin-typescript',
  options: {
    transpileOnly: true, // default
    compilerOptions: {
      target: 'es5',
      experimentalDecorators: true,
      jsx: 'react',
    },
  },
},

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.

Harmenx Harmenx · Accepted Answer · 2020-03-09T10:41:24

Cannot use JSX unless the '--jsx' flag is provided

Restart your IDE. Sometimes tsconfig.json changes aren't immediately picked up

Setting up Gatsby with Typescript causes 'Cannot use JSX unless the '--jsx' flag is provided.'

1 Answers