Problem with Visual Studio Code using "react-jsx" as jsx value with create-react-app
This is because VSCode's Typescript version is not using the newest babel features that create-react-app uses by default.
You can change VS Code to use the workspace's version of Typescript instead, which will fix this issue.
Open a TypeScript or JavaScript file and click on the TypeScript version number in the Status Bar. A message box will appear asking you which version of TypeScript VS Code should use
Select "Use Workspace Version" to use the newer Create React App typescript version.
In PhpStorm (and the same is probably true for WebStorm) I got it to not complain about "react-jsx" as the value by ticking "Always download the most recent version of schemas" in Remote JSON Schemas.
As mentioned by others, this is an open issue with create-react-app (CRA) script. However, none of the above mentioned solution worked for me. The only solution that works for me is adding the below config in .env
file (in project root).
DISABLE_NEW_JSX_TRANSFORM=true
For the ones using VS 2019 I had to install typescript 4.1 for visual studio from here: https://marketplace.visualstudio.com/items?itemName=TypeScriptTeam.TypeScript-41
Then it worked fine by using the new jsx setting in the compilerOptions etc.
If you are using VS Code and marksfrancis' answer didn't work for you. Maybe you should check your extensions for TypeScript, in my case the extension 'TypeScript God' was the cause I was still having this issue.