Error when trying to run an upgraded CRA 4 Typescript project

Describe the bug

When upgrading a Typescript project from CRA 3.4 to CRA 4.0, you get an error when running npm run start:

TypeError: Cannot add property noFallthroughCasesInSwitch, object is not extensible
    at verifyTypeScriptSetup ({...}/react-cra4-upgrade/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:232:45)
    at Object.<anonymous> ({...}/react-cra4-upgrade/node_modules/react-scripts/scripts/start.js:31:1)

This appears to happen when scanning the tsconfig.json file and modifying it for suggested changes. Based on the error, it appears the object holding the ts config cannot be changed.

When I manually add the noFallthroughCasesInSwitch config item to the ts config it passes.

(Write your answer here.)

Did you try recovering your dependencies?

Yes

(Write your answer here.)

Which terms did you search for in User Guide?

(Write your answer here if relevant.)

Environment

current version of create-react-app: 4.0.0 running from /Users/elylucas/.nvm/versions/node/v12.13.0/lib/node_modules/create-react-app

System: OS: macOS 10.15.6 CPU: (16) x64 Intel® Core™ i9-9880H CPU @ 2.30GHz Binaries: Node: 12.13.0 - ~/.nvm/versions/node/v12.13.0/bin/node Yarn: 1.22.4 - ~/.nvm/versions/node/v12.13.0/bin/yarn npm: 6.14.8 - ~/.nvm/versions/node/v12.13.0/bin/npm Browsers: Chrome: 86.0.4240.111 Edge: Not Found Firefox: 80.0.1 Safari: 14.0 npmPackages: react: ^17.0.1 => 17.0.1 react-dom: ^17.0.1 => 17.0.1 react-scripts: 4.0.0 => 4.0.0 npmGlobalPackages: create-react-app: 4.0.0

(paste the output of the command here.)

Steps to reproduce

(Write your steps here:)

1. Try creating a Typescript based app with react-scripts 3.4.X (here is a link to such an app: https://github.com/elylucas/react-cra4-ts-upgrade-issue).
2. Upgrade CRA by running npm i --save-exact react-scripts@4.0.0
3. Run npm run start and see the error.

Expected behavior

Based on the code in verifyTypeScriptSetup.js it looks like the user should see a message saying their tsconfig.json is being updated with the recommenced values, and then the app should start as normal.

Actual behavior

Get the following error when trying to start the app:

Reproducible demo

Link to a Ionic React app built with TS and CRA 3.4: https://github.com/elylucas/react-cra4-ts-upgrade-issue

[m-rutter]

Possible work around:

add this to your tsconfig:

{
  "compilerOptions": {
    "noFallthroughCasesInSwitch": true,
    // ...
  }
  // ...
}

A question to ask here is why is CRA overwriting a tsconfig option like this. Its one thing to overwrite the paths configs because its not supported in the babel/webpack config, or set as a default in a new project, but this seems a bit too opinionated for CRA as it has nothing to do with the build pipeline CRA provides.

It treats fallthroughs in switch statements as errors:

Report errors for fallthrough cases in switch statement.

• https://www.typescriptlang.org/docs/handbook/compiler-options.html

[leosuncin]

Also fail when jsx is set to a different value of react in tsconfig.json

Stacktrace

> react-scripts test
/home/user/projects/todo-webapp/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:239
appTsConfig.compilerOptions[option] = value;
^
TypeError: Cannot assign to read only property ‘jsx’ of object ‘#<Object>’
at verifyTypeScriptSetup (/home/user/projects/todo-webapp/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:239:43)
at Object.<anonymous> (/home/user/projects/todo-webapp/node_modules/react-scripts/scripts/test.js:32:1)
at Module._compile (internal/modules/cjs/loader.js:1076:30)
at Object.Module._extensions…js (internal/modules/cjs/loader.js:1097:10)
at Module.load (internal/modules/cjs/loader.js:941:32)
at Function.Module._load (internal/modules/cjs/loader.js:782:14)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)
at internal/main/run_main_module.js:17:47
npm ERR! Test failed.  See above for more details.

My previous tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve"
  },
  "include": [
    "src"
  ]
}

The required changes to upgrade:

diff --git a/tsconfig.json b/tsconfig.json
index 0980b23..7b1d3c6 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -12,12 +12,13 @@
     "allowSyntheticDefaultImports": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
     "module": "esnext",
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "preserve"
+    "jsx": "react"
   },
   "include": [
     "src"