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.