yarn create react-app with typescript throwing errors

Posted 2023-02-16

【中文标题】yarn create react-app with typescript throwing errors

【英文标题】：

【发布时间】：2021-03-04 01:30:18

【问题描述】：

我正在尝试创建一个新的 react 应用：

yarn create react-app my-app --template typescript

安装似乎工作正常，但是当我尝试yarn start 应用程序时，我收到错误：

C:\...\my-app\node_modules\react-scripts\scripts\utils\verifyTypeScriptSetup.js:239 appTsConfig.compilerOptions[选项] = 值； ^

TypeError：无法分配给对象的只读属性“jsx” '#' 在 verifyTypeScriptSetup (C:\...\my-app\node_modules\react-scripts\scripts\utils\verifyTypeScriptSetup.js:239:43) 在对象。 (C:\...\my-app\node_modules\react-scripts\scripts\start.js:31:1) 在 Module._compile (internal/modules/cjs/loader.js:1063:30) 在 Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10) 在 Module.load (internal/modules/cjs/loader.js:928:32) 在 Function.Module._load (internal/modules/cjs/loader.js:769:14) 在 Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12) 在 internal/main/run_main_module.js:17:47 错误命令失败，退出代码为 1。信息访问 https://yarnpkg.com/en/docs/cli/run for 有关此命令的文档。

对等依赖项似乎存在问题。 check-peer-dependencies 列出未满足的对等依赖项：

❌  @pmmmwh/react-refresh-webpack-plugin@0.4.2 requires type-fest ^0.13.1 (0.8.1 is installed) 
❌  @pmmmwh/react-refresh-webpack-plugin@0.4.2 requires webpack-hot-middleware 2.x (webpack-hot-middleware is not installed) 
❌  @pmmmwh/react-refresh-webpack-plugin@0.4.2 requires webpack-plugin-serve 0.x || 1.x (webpack-plugin-serve is not installed) 
❌  jest-config@26.6.1 requires ts-node >=9.0.0 (ts-node is not installed) 
❌  jsdom@16.4.0 requires canvas ^2.5.0 (canvas is not installed) 
❌  react-scripts@4.0.0 requires typescript ^3.2.1 (4.1.2 is installed) 
❌  sass-loader@8.0.2 requires fibers >= 3.1.0 (fibers is not installed) 
❌  sass-loader@8.0.2 requires node-sass ^4.0.0 (node-sass is not installed) 
❌  sass-loader@8.0.2 requires sass ^1.3.0 (sass is not installed) 
❌  ws@7.3.1 requires bufferutil ^4.0.1 (bufferutil is not installed) 
❌  ws@7.3.1 requires utf-8-validate ^5.0.2 (utf-8-validate is not installed)

在我添加未满足的依赖项后，抛出另一个错误：

错误 TS6046：'--jsx' 选项的参数必须是：'preserve'， 'react-native'，'react'。

在我将tsconfig.json中的jsx": "react-jsx"的值更改为jsx": "react"后，我终于可以启动应用程序了。

错误也发生在 npx create-react-app 上。我尝试在 Windows 10 和 linux 上运行命令 - 没有区别。

我错过了什么？

【问题讨论】：

已报告为错误github.com/facebook/create-react-app/issues/10107

【参考方案1】：

donavon 推荐一个临时解决方案：

在项目的根目录中创建一个文件：

//verifyTypeScriptSetup.js
"use strict";
function verifyTypeScriptSetup () 
module.exports = verifyTypeScriptSetup;

在你的 package.json 脚本中添加 prestart

"prestart": "cp verifyTypeScriptSetup.js node_modules/react-scripts/scripts/utils",

我与解决方案共享链接 https://github.com/facebook/create-react-app/issues/9868#issuecomment-731396876