Create-react-app: CRA 4.0 doesn't function with typescript

[dcsan]

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

[dcsan]

the --jsx bug is all over too

https://stackoverflow.com/questions/50432556/cannot-use-jsx-unless-the-jsx-flag-is-provided

I guess craco isn't working with CRA4 (yet?)
so the only way to use TS with CRA(4) seems to be to eject right now.

[rafgraph]

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).

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.

[asterikx]

For me, it works after upgrading to "react-scripts": "^4.0.1":

"react-scripts": "^4.0.1",
"typescript": "^4.1.2"

[ianschmitz]

This is an editor issue, and not specific to CRA from what i can tell. If you receive errors in npm start or npm 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.