使用打字稿模板将create-react-app更新到4.0时出错 [英] Error when updating create-react-app to 4.0 with typescript template

问题描述

我想将 react-scripts 更新到下一个版本( 4.0.0 )，因此可以使用本指南

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.

推荐答案

可以通过在 tsconfig.json 中启用 noFallthroughCasesInSwitch 选项来解决此问题.有关更多信息，请参见此处的讨论.

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

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

对于任何好奇的人，上述解决方案均不能解决该错误.它只是跳过下面的错误代码，如果没有提供，则会将建议的值分配给typescript编译器选项.默认情况下，从 react-scripts 生成的 tsconfig.json 没有 noFallthroughCasesInSwitch 选项.添加该选项可消除运行代码的需要.

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
    ...
  }
} 

如果脚本因其他选项而崩溃，并且堆栈跟踪与我的问题相同，则应检查 tsconfig.json

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

您需要将这些选项显式添加到您的 tsconfig.json 中，以便脚本可以跳过有问题的分支并避免崩溃.

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

这篇关于使用打字稿模板将create-react-app更新到4.0时出错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！