Repository: next.js
Issue: [NEXT-782] dynamic `import()` with node16 .js extensions cannot be resolved
Labels: TypeScript,Lazy Loading

### 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: #22 SMP Tue Jan 10 18:39:00 UTC 2023
    Binaries:
      Node: 16.17.0
      npm: 8.15.0
      Yarn: 1.22.19
      pnpm: 7.1.0
    Relevant packages:
      next: 13.2.4-canary.0
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0
```


### Which area(s) of Next.js are affected? (leave empty if unsure)

Dynamic imports (next/dynamic), TypeScript

### Link to the code that reproduces this issue

https://codesandbox.io/p/sandbox/sleepy-bird-3msu8y?file=%2Fpages%2Findex.tsx

### To Reproduce

1. Open the reproduction
2. Observe that the `Button.js` dynamic import cannot be resolved:
   ```
   ./pages/index.tsx:7:29
   Module not found: Can't resolve './Button.js'
      5 | // Type 'typeof import("/project/sandbox/node_modules/next/dynamic")'
      6 | // has no call signatures.
   >  7 | const Button = dynamic(() => import("./Button.js"), { ssr: false });
        |                             ^
      8 | 
      9 | export default function Home() {
     10 |   return (

   https://nextjs.org/docs/messages/module-not-found
   ```
   
   ![Screenshot 2023-03-02 at 12 38 25](https://user-images.githubusercontent.com/1935696/222419402-25805df2-d3e7-4c0d-8852-d7f70671f5d0.png)

### Describe the Bug

TypeScript `"module": "node16"` support was added by @loettz in the following PR 🎉

- https://github.com/vercel/next.js/pull/44177

However, this support does not work with dynamic `import()`

### Workaround (potentially buggy)

**Edit:** As noted by @tgrassl in [his comment below](https://github.com/vercel/next.js/issues/46678#issuecomment-1689902569), this may lead to other problems such as hydration errors and FOUC.

Adding the following `webpack` config with `extensionAlias` to the `next.config.js` file (see [Workaround 1 in this other issue](https://github.com/vercel/next.js/issues/41961#:~:text=Workaround%201%3A%20resolve.extensionAlias%20configuration%20option)):

```js
/** @type {import("next").NextConfig} */
const config = {
  reactStrictMode: true,
  webpack: (
    /** @type {import('webpack').Configuration} */
    webpackConfig
  ) => {
    // 💥 Still needed for dynamic import
    /** @type {Exclude<typeof webpackConfig.resolve, undefined>} */ (
      webpackConfig.resolve
    ).extensionAlias = {
      ".js": [".ts", ".tsx", ".js", ".jsx"],
    };

    return webpackConfig;
  },
};

export default config;
```

(This is also already present in the reproduction sandbox, just currently commented out)

cc @fluggo @cseas @kachkaev 

### Expected Behavior

Dynamic `import()` of a fully-specified ESM import path (with `.js` extension) should work

### Which browser are you using? (if relevant)

_No response_

### How are you deploying your application? (if relevant)

_No response_

<sub>[NEXT-782](https://linear.app/vercel/issue/NEXT-782/dynamic-import-with-node16-js-extensions-cannot-be-resolved)</sub>