Repository: next.js
Issue: Module resolution error with `.jsx` extension when VS Code auto-imports / renames files
Labels: bug,TypeScript

### Verify canary release

- [X] I verified that the issue exists in the latest Next.js canary release

### Provide environment information

```bash
Operating System:
      Platform: linux
      Arch: x64
      Version: #1 SMP PREEMPT_DYNAMIC Sun Aug  6 20:05:33 UTC 2023
    Binaries:
      Node: 16.17.0
      npm: 8.15.0
      Yarn: 1.22.19
      pnpm: 7.1.0
    Relevant Packages:
      next: 13.4.20-canary.6
      eslint-config-next: N/A
      react: undefined
      react-dom: undefined
      typescript: 5.2.2
    Next.js Config:
      output: N/A
```

### Which area(s) of Next.js are affected? (leave empty if unsure)

TypeScript (plugin, built-in types)

### Link to the code that reproduces this issue or a replay of the bug

https://codesandbox.io/p/sandbox/charming-dream-wkrmjd?file=/app/page.tsx:4,11

### To Reproduce

1. Visit the CodeSandbox link above
2. Observe that the `Form` import with the `.jsx` extension is not resolved to the `./Form.tsx` file

### Describe the Bug

When using fully-specified ESM import module specifiers (using full extensions, either with `Node16` or `NodeNext` module resolution in TypeScript), VS Code auto-imports and renames of `.tsx` files show up as `.jsx`.

For example, if there are already imports using the `.js` extension, [auto-importing `Form` from `Form.tsx` causes an import line to appear with `.jsx`](https://github.com/microsoft/TypeScript/issues/55502#issuecomment-1692298126)

```js
import AnotherComponent from './AnotherComponent.js';
import Form from './Form.jsx'; // 💥 This auto-import causes Next.js crash with module resolution error
```

![Screenshot 2023-08-25 at 10 58 20](https://github.com/vercel/next.js/assets/1935696/0952ca52-36e6-4a65-9031-82f6ed2eb35b)

```
Failed to compile

./app/page.tsx:1:0
Module not found: Can't resolve './Form.jsx'
> 1 | import Form from "./Form.jsx";
  2 | 
  3 | export default function Home() {
  4 |   return (

https://nextjs.org/docs/messages/module-not-found
```

Next.js cannot resolve `.jsx` to `.tsx` files, whereas [this is intended behavior from TypeScript's side](https://github.com/microsoft/TypeScript/issues/55502#issuecomment-1692298126)

This problem also reappears when renaming a `.tsx` file, if VS Code has been set to "Automatically update imports".

### Expected Behavior

Using auto-import and file renaming in VS Code with `.tsx` files should not cause crashes with Next.js

In order to achieve this, the `extensionAlias` webpack configuration for `Node16` / `NodeNext` introduced in the PR below by @loettz (reviewed by @styfle and @ijjk) should probably be extended with `.jsx` file extension support:

- https://github.com/vercel/next.js/pull/44177

Maybe it also makes sense to [consider adding additional extensions](https://github.com/vercel/next.js/pull/44177#issuecomment-1407438408)

cc @cseas @kachkaev @fluggo

### Which browser are you using? (if relevant)

_No response_

### How are you deploying your application? (if relevant)

_No response_

### Keywords

auto-import, auto import, jsx, tsx, file extensions, vs code