React 17, JSX Transform & IntelliJ IDE

If you're using IntelliJ IDE to developing your react app, you can found a few issues after upgrade React to version 17.

Typically you followed instruction, enable react-jsx and your IDE scream on you Cannot use JSX unless the '--jsx' flag is provided.

OK, where's problem?

React 17 comes with the support of a new version of the JSX transform. More info can be found on the official blog post

As a default, IntelliJ IDE doesn't use a TypeScript version which is located at your project node_modules folder.

The latest IDE builds (EAP 2020.3) uses TypeScript v4.0.2 but new JSX Transform require TypeScript v4.1.0 or newer.

You need to change the bundled TS version to the TS version which is using your app:

Preferences -> Language & Frameworks -> TypeScript -> TypeScript
(https://dev-to-uploads.s3.amazonaws.com/i/lagjwnj86lowlxair6i3.png)

Now you can enable JSX Transform at your tsconfig.json (more info: https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#removing-unused-react-imports)

...
"jsx": "react-jsx",
...

and optimize your imports by official instruction.

Thank's to the github user codepiyush for the hint: https://github.com/facebook/create-react-app/issues/9868#issuecomment-732016066