create-react-app: Error when using new 'react-jsx' TypeScript transform
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
but CRA overwrites the file every time it starts. Many bug reports on this ducking behavior
- https://github.com/facebook/create-react-app/issues/8614
- https://stackoverflow.com/questions/53794875/how-to-configure-react-script-so-that-it-doesnt-override-tsconfig-json-on-star
etc.
Did you try recovering your dependencies?
yes
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.",
Environment
➜ 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
System:
OS: macOS 10.15.7
CPU: (4) x64 Intel(R) Core(TM) i5-6267U CPU @ 2.90GHz
Binaries:
Node: 14.5.0 - /usr/local/bin/node
Yarn: 1.17.3 - /usr/local/bin/yarn
npm: 6.14.9 - /usr/local/bin/npm
Browsers:
Chrome: 86.0.4240.198
Edge: Not Found
Firefox: Not Found
Safari: 14.0.1
npmPackages:
react: ^17.0.1 => 17.0.1
react-dom: ^17.0.1 => 17.0.1
react-scripts: 4.0.1 => 4.0.1
npmGlobalPackages:
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
Reproducible demo
try with your own template
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Reactions: 24
- Comments: 28 (2 by maintainers)
Links to this issue
Commits related to this issue
- https://code.visualstudio.com/docs/typescript/typescript-compiling#_using-the-workspace-version-of-typescript https://github.com/facebook/create-react-app/issues/10144 ^ Fix for the newest version o... — committed to steviss/URLShortner-Frontend by steviss 4 years ago
- Upgrade typescript to force the version used for VS Code https://github.com/facebook/create-react-app/issues/10144 — committed to eai04191/dododex-extension by eai04191 4 years ago
- refactor(src): ♻️ remove extra boilerplates Fix https://github.com/facebook/create-react-app/issues/10144 — committed to timelessco/react-ts-template by navin-moorthy 4 years ago
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 innode_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 inpackage.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:@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.I have
"react-scripts": "^4.0.1", "typescript": "^4.1.2"
Doing a react-scripts build changes my “jsx”: “react” to “jsx”: “react-jsx”, failing the build.
For the record, I have the same error with TS version 4.2.3
OS: Windows 10 VS Code: 1.54.3
package.json:
tsconfig.json:
.vscode/settings.json:
VS Code -> Use Workspace Version -> 4.2.3
And I still get:
Restart VS Code or reopen project folder won’t fix the problem. The error is related to a new version of React because when I change to “jsx”: “react” the error disappears in VS Code. As You know CRA after build overrides tsconfig to original version “jsx”: “react-jsx” 🙂 so my question is simple:
Is there any official fix for this problem in VS Code with TypeScript version ^4.3.2 and React version ^17?
Same problem on WebStorms.
Any luck figuring it out?
@Cidrax this answer on SO worked for me with intellij based IDEs - https://stackoverflow.com/a/65090491
In IDE settings:
June 2021 and the problem still persists. I can’t develop any React app at all because of this, and I don’t see why CRA has to meddle with these configurations in the first place. PS I use Atom as my editor which does not add any own config file. I tried updating typescript and react-scripts to those specific suggested versions, but alas…
Adding this to tsconfig helped me.
For me, it works after upgrading to
"react-scripts": "^4.0.1"
:Is there any update on this?
maybe not recommended, but I updated the node_modules file directly.
node_modules > react-scripts > scripts > utils > verifyTypeScriptSetup.js
changed around line 154:
hasJsxRuntime && semver.gte(ts.version, '4.1.0-beta') ? 'react' : 'react',
For those using Yarn Workspaces, you’ll have to
nohoist
orresolutions
yourtypescript
via yourpackage.json
. It works for me now.had to restart vs code to get it working after following the simpler solution.
Restarting the TS server from the command palette wasn’t enough
This is an editor issue, and not specific to CRA from what i can tell. If you receive errors in
npm start
ornpm run build
, then you know you have an issue with CRA. The suggestion from https://github.com/facebook/create-react-app/issues/10144#issuecomment-733278351 should get you on the right path.