创建带有typescript抛出错误的react应用程序

Question

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

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

安装似乎工作正常，但当我尝试纱线启动的应用程序，我得到一个错误：

C:\。。。\我的应用程序\node\u modules\react scripts\scripts\utils\verifyTypeScriptSetup。js:239 appTsConfig。编译器选项[选项]=值^

TypeError:无法在对象的verifyTypeScriptSetup（C:\…\my app\node\u modules\react scripts\scripts\utils\verifyTypeScriptSetup.js:239:43）上分配给对象“#”的只读属性“jsx”。（C:\…\my app\node\u modules\react scripts\scripts\start.js:31:1）位于模块处_在对象处编译（internal/modules/cjs/loader.js:1063:30）。模块_扩展。。模块处的js（internal/modules/cjs/loader.js:1092:10）。在函数处加载（内部/modules/cjs/loader.js:928:32）。模块_在函数处加载（内部/modules/cjs/loader.js:769:14）。位于internal/main/run_main_模块的executeUserPoint[as runMain]（internal/modules/run_main.js:72:12）。js:17:47错误命令失败，退出代码为1。信息访问https://yarnpkg.com/en/docs/cli/run有关此命令的文档。

对等依赖关系似乎有问题。check-peer-依赖关系列出未满足的对等依赖关系：

❌  @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”选项的参数必须为：“保留”、“反应本机”、“反应”。

之后，我改变的值从jsx：反应-jsx到jsx：反应在tsconfig.json我终于可以启动应用程序。

npx create react应用程序也会出现错误。我尝试在windows 10和linux上运行这些命令-没有区别。

我错过了什么？

Answer 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