The latest articles on DEV Community by Honza (@gynekolog). https://dev.to/gynekolog https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F214248%2F93256de5-f8df-4fed-913d-e1b721d19c33.jpeg https://dev.to/gynekolog en Honza Mon, 23 Nov 2020 15:16:12 +0000 https://dev.to/gynekolog/react-17-intellij-ide-4nhj https://dev.to/gynekolog/react-17-intellij-ide-4nhj <p>If you're using IntelliJ IDE to developing your react app, you can found a few issues after upgrade React to version 17.</p> <p>Typically you followed instruction, enable react-jsx and your IDE scream on you <code>Cannot use JSX unless the '--jsx' flag is provided</code>.</p> <p>OK, where's problem?</p> <p>React 17 comes with the support of a new version of the JSX transform. More info can be found on the official <a href="https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html">blog post</a></p> <p>As a default, IntelliJ IDE doesn't use a TypeScript version which is located at your project <code>node_modules</code> folder.</p> <p>The latest IDE builds (EAP 2020.3) uses TypeScript v4.0.2 but new JSX Transform require TypeScript v4.1.0 or newer.</p> <p>You need to change the bundled TS version to the TS version which is using your app:</p> <p><code>Preferences -&gt; Language &amp; Frameworks -&gt; TypeScript -&gt; TypeScript</code><br> (<a href="https://dev-to-uploads.s3.amazonaws.com/i/lagjwnj86lowlxair6i3.png">https://dev-to-uploads.s3.amazonaws.com/i/lagjwnj86lowlxair6i3.png</a>)</p> <p>Now you can enable JSX Transform at your <code>tsconfig.json</code> (more info: <a href="https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#removing-unused-react-imports">https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#removing-unused-react-imports</a>)<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>... "jsx": "react-jsx", ... </code></pre> </div> <p>and optimize your imports by <a href="https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#removing-unused-react-imports">official instruction</a>.</p> <p>Thank's to the github user <code>codepiyush</code> for the hint: <a href="https://github.com/facebook/create-react-app/issues/9868#issuecomment-732016066">https://github.com/facebook/create-react-app/issues/9868#issuecomment-732016066</a></p> react typescript intellij