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

[mikelehen]

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.

[callmephil]

Does this also affect absolute imports and or aliases?
https://nextjs.org/docs/advanced-features/module-path-aliases

// tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/components/*": ["components/*"]
    }
  }
}

[n1xx1]

I think the correct approach here is to change to preserve only if you are using "tsx": "react".

https://github.com/vercel/next.js/blob/canary/packages/next/lib/typescript/writeConfigurationDefaults.ts

It's not optimal having to change your tsconfig.json everytime you restart the dev server.

[Admiralfeb]

From what I can glean:
TSConfig jsx - preserve will keep the same files and make only the jump from TS to JS, passing them to the next process (Nextjs) where they are processed to the final output.

This means that "preserve" should be fine, but TS/VSCode isn't handling it correctly.

[lslunis]

Looks like the underlying issue is in TypeScript: microsoft/TypeScript#41762

[Admiralfeb]

Typescript's design meeting over this: microsoft/TypeScript#46141

[jasonwilliams]

Looks like this has been fixed at TypeScript level microsoft/TypeScript#46368

[nratter]

Hopefully released in Typescript 4.5?

[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:

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.