使用 typescript 模板将 create-react-app 更新到 4.0 时出错

Posted 2023-02-22

【中文标题】使用 typescript 模板将 create-react-app 更新到 4.0 时出错

【英文标题】：Error when updating create-react-app to 4.0 with typescript template

【发布时间】：2021-01-14 20:16:56

【问题描述】：

我想将react-scripts 更新到下一个版本 (4.0.0)，这样我就可以通过本指南here 使用快速刷新功能。但是在重启服务器时，由于以下错误，脚本无法运行：

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

【参考方案1】：

这可以通过在tsconfig.json 中启用noFallthroughCasesInSwitch 选项来解决。有关更多信息，请参阅讨论 here。

  "compilerOptions": 
    "noFallthroughCasesInSwitch": true,
    ...
  ,
  ...

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

// 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 中是否缺少以下编译器选项

These 是在 tsconfig.json 中未指定时 Typescript 编译器选项的建议值

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' ,
;

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

【讨论】：

我会等待升级，直到他们解决这个问题。不想让我的 tsconfig 膨胀！

我将"noFallthroughCasesInSwitch": true, 添加到我的tsconfig.json，但错误仍然出现？如何确保react-script start 真正使用我的tsconfig.json？

我无法在我的设置中找到问题，因此我不得不使用create-react-app my-app --template typescript 重新设置我的项目。现在一切正常。

【参考方案2】：

我申请了：

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

然后我用命令yarn重新安装。

最后，yarn start。

这样我创建了新的默认文件tsconfig.json 和文件yarn.lock。

【讨论】：

我这样做了，但是每次我停止服务器时它都不会重新启动，除非我删除 tsconfig.json 文件

^ 通过删除我的所有依赖项然后重新添加它们来修复。

【参考方案3】：

当我尝试在我的 react 项目中开始使用 typescript 时，我遇到了完全相同的问题，什么解决了它在我的package.json 中使用具有这些特定版本的下一个包的问题

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

还有这个tsconfig.json 文件

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