DEV Community

loading...

React 17, JSX Transform & IntelliJ IDE

Honza
React, Typescript, simplicity.
・1 min read

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",
...
Enter fullscreen mode Exit fullscreen mode

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

Discussion (1)

Collapse
jamesmcmahon profile image
James McMahon

Thanks for that! Surprising how few other people have written about this issue.