Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Error when using new 'react-jsx' TypeScript transform

See original GitHub issue

Describe the bug

start a vanilla project using the typescript template open any file. you’ll see an error like this this:


try to edit the tsconfig.json image

but CRA overwrites the file every time it starts. Many bug reports on this ducking behavior


Did you try recovering your dependencies?


Which terms did you search for in User Guide?

wtf does cra overwrite my tsconfig.json

Cannot use JSX unless the ‘–jsx’ flag is provided.",


➜  tadmin git:(tadmin) ✗ npx create-react-app --info
npx: installed 67 in 4.641s

Environment Info:

  current version of create-react-app: 4.0.1
  running from /Users/dc/.npm/_npx/17244/lib/node_modules/create-react-app

    OS: macOS 10.15.7
    CPU: (4) x64 Intel(R) Core(TM) i5-6267U CPU @ 2.90GHz
    Node: 14.5.0 - /usr/local/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.14.9 - /usr/local/bin/npm
    Chrome: 86.0.4240.198
    Edge: Not Found
    Firefox: Not Found
    Safari: 14.0.1
    react: ^17.0.1 => 17.0.1
    react-dom: ^17.0.1 => 17.0.1
    react-scripts: 4.0.1 => 4.0.1
    create-react-app: Not Found

Steps to reproduce

1 $ npx create-react-app my-app --template typescript 2 open vscode editor.

Expected behavior

can use typescript with CRA

Actual behavior

FFS image

Reproducible demo

try with your own template

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:22
  • Comments:28 (2 by maintainers)

github_iconTop GitHub Comments

rafgraphcommented, Nov 25, 2020

This is because VS Code the app hasn’t updated to typescript v4.1 yet which has support for the new jsx transform. To fix this you need to tell VS Code to use the Workspace version of typescript (v4.1.2).

EDIT: while this works, there is a simpler solution (see below) To fix this, while viewing a TS file, bring up the command pallet (cmd+shift+p) and type “select typescript version”, select the option and then select “Use Workspace Version 4.1.2”.

Side note, while CRA creates a package.json with "typescript": "^4.0.3", the actual installed version in node_modules is 4.1.2 (this should be fix by CRA as 4.0.3 is not compatible). So it probably makes sense to also update the typescript version in package.json.

Simpler solution: If you just update the TS version in package.json to 4.1.2, VS Code will automatically use the workspace version because it knows its internal TS version is not compatible with the project. This way you don’t end up with a .vscode/settings.json in your project.

As @asterikx pointed out, update package.json to:

"react-scripts": "^4.0.1",
"typescript": "^4.1.2"
dcsancommented, Nov 25, 2020

@rafgraph thanks for the helpful tip! I can confirm the steps above fixed this.

VSCode also creates a project .vscode/settings.json file to control this setting, it might be useful to copy this into the repo when doing the setup, if it is a vscode specific setting.

  "typescript.tsdk": "node_modules/typescript/lib"
Read more comments on GitHub >

github_iconTop Results From Across the Web

Typescript + Parcel new JSX transform - React is not defined ...
I've identified the problem is the version of a few babel plugins that are outdated that Parcel (version 2.0.0-beta.3.1 at time of writing) ......
Read more >
Typescript + Parcel new JSX transform - React is not defined ...
I've identified the problem is the version of a few babel plugins that are outdated that Parcel (version 2.0.0-beta.3.1 at time of writing)...
Read more >
Introducing the New JSX Transform – React Blog
With the new transform, you can use JSX without importing React. ... are intended to only be used by compilers like Babel and...
Read more >
Having troubles with typescript beta and new jsx transform
I enabled the experimental EXTEND_ESLINT, and had TS on beta version, yet still, I get React is not defined when trying to load...
Read more >
Documentation - JSX - TypeScript
jsx file extension. The react mode will emit React.createElement , does not need to go through a JSX transformation before use, and the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found