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

Question

I want to update react-scripts to the next version ( 4.0.0 ) so I can use the fast refresh feature using this guide here . But when restarting the server, the script doesn't work because of the error below:

$ yarn start
yarn run v1.22.4
$ react-scripts start
E:\Github\Web\so-rank\node_modules\react-scripts\scripts\utils\verifyTypeScriptSetup.js:210
        appTsConfig.compilerOptions[option] = suggested;
                                            ^

TypeError: Cannot add property noFallthroughCasesInSwitch, object is not extensible
    at verifyTypeScriptSetup (E:\Github\Web\so-rank\node_modules\react-scripts\scripts\utils\verifyTypeScriptSetup.js:210:45)
    at Object.<anonymous> (E:\Github\Web\so-rank\node_modules\react-scripts\scripts\start.js:31:1)
    at Module._compile (internal/modules/cjs/loader.js:1138:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1158:10)
    at Module.load (internal/modules/cjs/loader.js:986:32)
    at Function.Module._load (internal/modules/cjs/loader.js:879:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
    at internal/main/run_main_module.js:17:47
error Command failed with exit code 1.

Answer 1

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.

Answer 2

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 .

Answer 3

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"
  ]
}