【发布时间】：2020-11-20 09:07:30
【问题描述】：
我正在尝试使用 typescript create-react-app，但 JSX 和 TS 似乎存在问题。我阅读了一些可能的解决方案，但对我来说并不奏效。
我有：
- npm：版本 16.14.7
- 节点：版本 14.8.0
我使用了docs中的npx create-react-app my-app --template typescript
安装很顺利，但是当我尝试运行 npm start 时，它给了我这个错误：
> my-app@0.1.0 start /Users/lukasbenediktson/Desktop/react-types/my-app
> react-scripts start
/Users/lukasbenediktson/Desktop/react-types/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 '#<Object>'
at verifyTypeScriptSetup (/Users/lukasbenediktson/Desktop/react-types/my-app/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:239:43)
at Object.<anonymous> (/Users/lukasbenediktson/Desktop/react-types/my-app/node_modules/react-scripts/scripts/start.js:31:1)
at Module._compile (internal/modules/cjs/loader.js:1251:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1272:10)
at Module.load (internal/modules/cjs/loader.js:1100:32)
at Function.Module._load (internal/modules/cjs/loader.js:962:14)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)
at internal/main/run_main_module.js:17:47
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! my-app@0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the my-app@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
我试图将node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js中的这一行238更改为suggested by tudor07 here：
} else if (parsedCompilerOptions[option] !== valueToCheck) {
到
} else if (parsedCompilerOptions[option] !== valueToCheck && option !== "jsx") {
这让我运行npm start 并且服务器已启动并运行。但它现在显示它无法识别 JSX/TSX：
TypeScript error in /Users/lukasbenediktson/Desktop/react-types/my-app/src/App.tsx(7,5):
Could not find a declaration file for module 'react/jsx-runtime'. '/Users/lukasbenediktson/Desktop/react-types/my-app/node_modules/react/jsx-runtime.js' implicitly has an 'any' type.
If the 'react' package actually exposes this module, consider sending a pull request to amend 'https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react` TS7016
5 | function App() {
6 | return (
> 7 | <div className="App">
| ^
8 | <header className="App-header">
9 | <img src={logo} className="App-logo" alt="logo" />
10 | <p>
我的package.json 看起来像这样：
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-scripts": "4.0.0",
"typescript": "^4.0.3",
"web-vitals": "^0.2.4"
},
"devDependencies": {
"@types/jest": "^26.0.15",
"@types/node": "^12.0.0",
"@types/react": "^16.9.53",
"@types/react-dom": "^16.9.8"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
感谢您的宝贵时间。
更新：解决方案（至少对我而言）
在我的tsconfig.json 中，我将我的"compilerOptions": 从"jsx": "react-jsx" 更改为"jsx": "react"。请注意，我仍然需要在我的node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js 中的第 238 行进行更改为suggested by tudor07 here
如果它太“hacky”，请告诉我
【问题讨论】：
-
我注意到，你有 react:17，但 types 用于 react 16。请将你的 @types/react 更新为 v.17.*。还将您的 @types/** 移动到 devDependencies
-
@types/react 说最新版本是 16.9.56？ @captain-yossarian
-
这里是源代码的链接：github.com/facebook/create-react-app/blob/… 请在你的 node_modules (node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:239) 中找到 verifyTypeScriptSetup 并添加 console.logs。调试起来会更方便
-
@captain-yossarian 谢谢，但很抱歉 - 我真的不明白我应该做什么。你读过我在问题中的更新吗？我认为那里揭示了真正的错误
标签： reactjs typescript create-react-app react-tsx react-typescript