Create-react-app: tsconfig.js.

[root-lxq]

在最新的脚手架，创建的项目npx create-react-app xx --template typescript 会出现tsconfig.js 中“jsx”: "react-jsx"

[upendra-web]

Yeah, react-scripts is forcefully changing the jsx key in compilerOptions from react to react-jsx. But my code editor is showing some tsconfig related errors.

Here's my tsconfig.json

Here's the error my code editor is showing

So any tips to solve this issue? Thanks in advance.

[raikusy]

I am also facing this issue. Any help regarding this?

[agos]

restarting your ide/editor likely helps

[raikusy]

restarting your ide/editor likely helps

No it doesn't.

[raikusy]

I created a fresh project using create-react-app. And got this warning in VSCode.

❯ create-react-app --version
4.0.1

[LuizCristino]

@raikusy @upendra-web I got the same problem. I just ran the following code

yarn upgrade @types/react@latest @types/react-dom@latest typescript@latest

And restarted vscode after. And fixed that error.

My dependecies now are

 ...
 "@types/react": "^17.0.0",
 "@types/react-dom": "^17.0.0",
 "typescript": "^4.1.2",
...

It appearts to run tsconfig with react-jsx typescript 4.1.0 or superior is required

I also had to install https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-next

[upendra-web]

@raikusy @upendra-web I got the same problem. I just ran the following code

yarn upgrade @types/react@latest @types/react-dom@latest typescript@latest

And restarted vscode after. And fixed that error.

My dependecies now are

 ...
 "@types/react": "^17.0.0",
 "@types/react-dom": "^17.0.0",
 "typescript": "^4.1.2",
...

It appearts to run tsconfig with react-jsx typescript 4.1.0 or superior is required

I also had to install https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-next

Yeah, installing the latest vscode-typescript plugin solved the issue for me.

Thanks @LuizCristino , for the tip.

[ancs21]

Hello,

My solution

• Step 1: Install npm-check-updates
  https://www.npmjs.com/package/npm-check-updates

yarn add -D npm-check-updates

• Step 2: Upgrade package

yarn ncu -u

• Step 3: Reload VSCode

Thanks @LuizCristino .

[raikusy]

Hello,

My solution

• Step 1: Install npm-check-updates
  https://www.npmjs.com/package/npm-check-updates

yarn add -D npm-check-updates

• Step 2: Upgrade package

yarn ncu -u

• Step 3: Reload VSCode

Thanks @LuizCristino .

⚠️ WARNING ⚠️
If you do this in an old/existing project, it will update all the packages. Which might break your application. You can do this on a newly created app. But this isn't recommended. Simply upgrading typescript, @types/react, @types/react-dom and installing the JavaScript and TypeScript Nightly will do the job. Upgrading all packages to latest version might break the app.

[Jasonzj]

@raikusy @upendra-web
The solution is here #10107

[ianschmitz]

This is an editor issue, and not specific to CRA from what i can tell. If you receive errors in npm start or npm run build, then you know you have an issue with CRA. The suggestion from https://github.com/facebook/create-react-app/issues/10144#issuecomment-733278351 should get you on the right path.