我正在尝试创建一个新的 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[option] = value; ^
TypeError: Cannot assign to read only property 'jsx' of object '#' at verifyTypeScriptSetup (C:\...\my-app\node_modules\react-scripts\scripts\utils\verifyTypeScriptSetup.js:239:43) at Object. (C:\...\my-app\node_modules\react-scripts\scripts\start.js:31:1) at Module._compile (internal/modules/cjs/loader.js:1063:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10) at Module.load (internal/modules/cjs/loader.js:928:32) at Function.Module._load (internal/modules/cjs/loader.js:769:14) at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12) at internal/main/run_main_module.js:17:47 error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
对等依赖性似乎存在问题。 check-peer-dependencies 列出未满足的对等依赖项:
❌ @pmmmwh/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cebcabafadbae3bcaba8bcabbda6e3b9abacbeafada5e3bea2bba9a7a08efee0fae0fc" rel="noreferrer noopener nofollow">[email protected]</a> requires type-fest ^0.13.1 (0.8.1 is installed)
❌ @pmmmwh/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="afddcaceccdb82ddcac9ddcadcc782d8cacddfceccc482dfc3dac8c6c1ef9f819b819d" rel="noreferrer noopener nofollow">[email protected]</a> requires webpack-hot-middleware 2.x (webpack-hot-middleware is not installed)
❌ @pmmmwh/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0c7e696d6f78217e696a7e697f64217b696e7c6d6f67217c60796b65624c3c2238223e" rel="noreferrer noopener nofollow">[email protected]</a> requires webpack-plugin-serve 0.x || 1.x (webpack-plugin-serve is not installed)
❌ <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="abc1ced8df86c8c4c5cdc2cceb999d859d859a" rel="noreferrer noopener nofollow">[email protected]</a> requires ts-node >=9.0.0 (ts-node is not installed)
❌ <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d8b2abbcb7b598e9eef6ecf6e8" rel="noreferrer noopener nofollow">[email protected]</a> requires canvas ^2.5.0 (canvas is not installed)
❌ <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4331262220376e3020312a33373003776d736d73" rel="noreferrer noopener nofollow">[email protected]</a> requires typescript ^3.2.1 (4.1.2 is installed)
❌ <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b4c7d5c7c799d8dbd5d0d1c6f48c9a849a86" rel="noreferrer noopener nofollow">[email protected]</a> requires fibers >= 3.1.0 (fibers is not installed)
❌ <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ddaebcaeaef0b1b2bcb9b8af9de5f3edf3ef" rel="noreferrer noopener nofollow">[email protected]</a> requires node-sass ^4.0.0 (node-sass is not installed)
❌ <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="087b697b7b256467696c6d7a48302638263a" rel="noreferrer noopener nofollow">[email protected]</a> requires sass ^1.3.0 (sass is not installed)
❌ <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5c2b2f1c6b726f726d" rel="noreferrer noopener nofollow">[email protected]</a> requires bufferutil ^4.0.1 (bufferutil is not installed)
❌ <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ccbbbf8cfbe2ffe2fd" rel="noreferrer noopener nofollow">[email protected]</a> requires utf-8-validate ^5.0.2 (utf-8-validate is not installed)
添加未满足的依赖项后，会引发另一个错误:
error TS6046: Argument for '--jsx' option must be: 'preserve', 'react-native', 'react'.
在将 tsconfig.json 中的 jsx": "react-jsx" 的值更改为 jsx": "react" 后我终于可以启动应用程序了。
npx create-react-app 也会发生错误。我尝试在 Windows 10 和 Linux 上运行命令 - 没有差异。
我错过了什么？
最佳答案
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
关于reactjs - yarn 创建 react 应用程序与 typescript 抛出错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64932747/