4.0.0 breaks with typescript (all versions)

Describe the bug

I made a clean install of cra@next with typescript and then upgraded typescript to 4.1.0-beta ( also tested 4.1.0-dev.20201023 )

npx create-react-app@next --scripts-version=@next --template=typescript@next my-ts-app

$$$ then replaced typescript 4.0.3 with 4.1.0-beta ( or ^4.1.0-beta ) in package.json

rm -rf node_modules package-lock.json && npm i

npm start

Error message:

node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:239
      appTsConfig.compilerOptions[option] = value;
                                          ^

TypeError: Cannot assign to read only property 'jsx' of object '#<Object>'

( EDIT: This doesn’t happen with cra 4.0.0-next.98 )

Did you try recovering your dependencies?

Yes

Which terms did you search for in User Guide?

I just looked for typescript bugs reported and closed in the last few days

Environment

System: OS: macOS 10.15.7 CPU: (8) x64 Intel® Core™ i7-4770K CPU @ 3.50GHz Binaries: Node: 14.14.0 - /usr/local/bin/node Yarn: Not Found npm: 6.14.8 - /usr/local/bin/npm Browsers: Chrome: 86.0.4240.111 Firefox: Not Found Safari: 14.0 npmPackages: react: ^17.0.1 => 17.0.1 react-dom: ^17.0.1 => 17.0.1 react-scripts: 4.0.0-next.117 => 4.0.0-next.117 npmGlobalPackages: create-react-app: Not Found

Steps to reproduce

1. npx create-react-app@next --scripts-version=@next --template=typescript@next my-ts-app

2. replace typescript 4.0.3 with 4.1.0-beta ( or ^4.1.0-beta ) in package.json

3. rm -rf node_modules package-lock.json && npm i

4. npm start

Expected behavior

Should work out of the box

Actual behavior

node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:239
      appTsConfig.compilerOptions[option] = value;
                                          ^

TypeError: Cannot assign to read only property 'jsx' of object '#<Object>'

Reproducible demo

Steps are simple enough to build your own demo

[benneq]

@iansu I found it!!

I started debugging verifyTypSscriptSetup.js

First issue I found: (line 151)

    jsx: {
      parsedValue:
        hasJsxRuntime && semver.gte(ts.version, '4.1.0-beta')
          ? ts.JsxEmit.ReactJsx
          : ts.JsxEmit.React,

It must be ts.JsxEmit.ReactJSX (capital letters) instead of ts.JsxEmit.ReactJsx.

Perfect example why people use TypeScript instead of plain old JS. 😏

[iansu]

That was working for me. You can also try deleting your tsconfig.json and it should automatically get recreated with the new settings.