使用打字稿模板将 create-react-app 更新到 4.0 时出错
Error when updating create-react-app to 4.0 with typescript template
我想将 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.
这可以通过在 tsconfig.json
中启用 noFallthroughCasesInSwitch
选项来解决。有关详细信息,请参阅讨论 here。
{
"compilerOptions": {
"noFallthroughCasesInSwitch": true,
...
},
...
}
对于任何好奇的人,上述解决方案并没有修复错误。它只是跳过 运行 宁下面的错误代码,如果没有提供,它将把建议的值分配给打字稿编译器选项。默认情况下从 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
以便脚本可以跳过错误分支并避免崩溃。
我申请了:
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"
]
}
我想将 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.
这可以通过在 tsconfig.json
中启用 noFallthroughCasesInSwitch
选项来解决。有关详细信息,请参阅讨论 here。
{
"compilerOptions": {
"noFallthroughCasesInSwitch": true,
...
},
...
}
对于任何好奇的人,上述解决方案并没有修复错误。它只是跳过 运行 宁下面的错误代码,如果没有提供,它将把建议的值分配给打字稿编译器选项。默认情况下从 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
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"
]
}