VS Code auto-import of React Components broken in VS Code (Next.JS + React 17 JSX + TypeScript incompatibility)

What version of Next.js are you using?

10.2.3 (alse tested: 11.0.1)

What version of Node.js are you using?

12.22.1

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

n/a

Describe the Bug

When using Next.JS w/ TypeScript enabled, trying to auto-import react Components in VS Code incorrectly suggests adding import React from 'react' instead of the correct component import.

The fix from a TypeScript / VS Code perspective seems to be setting "jsx": "react-jsx" in your tsconfig.json (see here). But if you do this in your next.js app, then yarn dev will “helpfully” undo it:

$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
We detected TypeScript in your project and reconfigured your tsconfig.json file for you. Strict-mode is set to false by default.

The following mandatory changes were made to your tsconfig.json:

	- jsx was set to preserve (next.js implements its own optimized jsx transform)

Expected Behavior

Using VS Code’s auto-import functionality should work out of the box in a Next.JS + TypeScript app.

To Reproduce

1. yarn create next-app --typescript (accept default my-app name)
2. code my-app (to open VS Code).
3. Open my-app/pages/index.tsx file.
4. Add <MyApp /> anywhere within the Home component.
5. When the red squiggly appears under MyApp, hover over it and click “Quick Fix…” (or just press ⌘. shortcut on macOS)

Result: It suggests: import default ‘React’ from module “react” Expected: It should suggest: import default ‘MyApp’ from module “./_app”

Note: If you accept the first suggestion to add the React import, then triggering the quick fix a second time will suggest the correct import.

[nratter]

Fixed in Typescript 4.5.2! After upgrading, make sure you’re using the correct version in VSCode. View -> Command Palette -> type in “Typescript” and select “Typescript: Select Typescript version” and then select 4.5.2. Hope this helps!

[balazsorban44]

@mikelehen could you check the suggested changes?

I am trying to reproduce, and it seems to work now, using TypeScript 4.5.2: