Error when updating create-react-app to 4.0 with typescript template

I had exactly the same issue when I tried to start to use typescript in my react project, what has solved the issue it's using the next packages with these specific versions in my package.json

"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"typescript": "^4.1.2",

And this tsconfig.json file

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

I applied:

rm -rf yarn.lock
rm -rf tsconfig.json

Then I reinstalled with the command yarn.

Last, yarn start.

This way I created the new default file tsconfig.json and the file yarn.lock.

This can be fixed by enabling noFallthroughCasesInSwitch option in your tsconfig.json. See the discussion here for more info.

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

For anyone curious, the above solution does not fix the bug. It just skips running the buggy code below which will assign the suggested value to the typescript compiler option if not provided. The tsconfig.json generated from react-scripts by default doesn't have noFallthroughCasesInSwitch option. Adding that option removes the need to run the code.

// Some options when not present in the tsconfig.json will be assigned
// a suggested value which crashes the program
if (suggested != null) {
  if (parsedCompilerOptions[option] === undefined) {
    appTsConfig.compilerOptions[option] = suggested; // error here
    ...
  }
} 

EDIT:

If the script crashes with other options and you have the same stacktrace as the one in my question, you should check if the following compiler options are missing in your tsconfig.json

These are the suggested values for Typescript compiler option when not specified in the tsconfig.json

const compilerOptions = {
  // These are suggested values and will be set when not present in the
  // tsconfig.json
  target: {
    parsedValue: ts.ScriptTarget.ES5,
    suggested: 'es5',
  },
  lib: { suggested: ['dom', 'dom.iterable', 'esnext'] },
  allowJs: { suggested: true },
  skipLibCheck: { suggested: true },
  esModuleInterop: { suggested: true },
  allowSyntheticDefaultImports: { suggested: true },
  strict: { suggested: true },
  forceConsistentCasingInFileNames: { suggested: true },
  noFallthroughCasesInSwitch: { suggested: true },
  module: {
    parsedValue: ts.ModuleKind.ESNext,
    value: 'esnext',
    reason: 'for import() and import/export',
  },
  moduleResolution: {
    parsedValue: ts.ModuleResolutionKind.NodeJs,
    value: 'node',
    reason: 'to match webpack resolution',
  },
  resolveJsonModule: { value: true, reason: 'to match webpack loader' },
  isolatedModules: { value: true, reason: 'implementation limitation' },
  noEmit: { value: true },
  jsx: {
    parsedValue: ts.JsxEmit.React,
    suggested: 'react',
  },
  paths: { value: undefined, reason: 'aliased imports are not supported' },
};

You need to explicitly add those options to your tsconfig.json so the script can skip the buggy branch and avoid crashing.