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

IT技术 reactjs typescript create-react-app
2021-05-24 20:12:54

我想更新react-scripts到下一个版本 ( 4.0.0),因此我可以使用此处的本指南使用快速刷新功能但是重新启动服务器时,由于以下错误,脚本不起作用:

$ 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.
3个回答

这可以通过noFallthroughCasesInSwitch在您的tsconfig.json. 有关更多信息,请参阅此处的讨论

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

对于任何好奇的人,上述解决方案并没有修复错误。它只是跳过运行下面的错误代码,如果未提供,它将为typescript编译器选项分配建议的值。tsconfig.json从生成react-scripts默认情况下没有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

这些是 Typescript 编译器选项中未指定时的建议值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' },
};

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

我申请了:

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

然后我用命令重新安装yarn

最后,yarn start

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

当我尝试在我的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"
  ]
}