DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,155 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Honza
Honza

Posted on

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",
...
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

Top comments (1)

Collapse
 
jamesmcmahon profile image
James McMahon

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

🌚 Browsing with dark mode makes you a better developer by a factor of exactly 40.

It's a scientific fact.