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.

NearHuscarl · Accepted Answer · 2020-10-24 11:52:57Z

61

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.

edited Oct 24, 2020 at 11:52

answered Sep 29, 2020 at 8:37

NearHuscarl

83k24 gold badges321 silver badges291 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

olefrank Over a year ago

I will wait with upgrading until they fix this. Don't want to bloat my tsconfig with all this!

winklerrr Over a year ago

I added "noFallthroughCasesInSwitch": true, to my tsconfig.json but the error still shows up? How can I ensure that react-script start really uses my tsconfig.json?

winklerrr Over a year ago

I wasn't able to find the problem in my setup, so I had to re-setup my project with create-react-app my-app --template typescript. Now everything works.

JMP · Accepted Answer · 2020-11-21 13:28:52Z

9

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.

edited Nov 21, 2020 at 13:28

JMP

4,62117 gold badges34 silver badges44 bronze badges

answered Nov 20, 2020 at 23:51

FeBorges

1221 bronze badge

2 Comments

PhilWilliammee Over a year ago

I did this but then every time I stop the server it wont restart unless I delete the tsconfig.json file

PhilWilliammee Over a year ago

^ fixed by removing all of my dependencies and then re adding them.

CrsCaballero · Accepted Answer · 2021-11-23 19:53:38Z

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

Collectives™ on Stack Overflow

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

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related