with-msw example crashes with ERR_UNSUPPORTED_DIR_IMPORT error

[watch-janick]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 21.6.0: Mon Aug 22 20:19:52 PDT 2022; root:xnu-8020.140.49~2/RELEASE_ARM64_T6000
Binaries:
Node: 18.7.0
npm: 8.15.0
Yarn: 1.22.18
pnpm: 7.17.0
Relevant packages:
next: 13.0.5-canary.4
eslint-config-next: N/A
react: 18.2.0
react-dom: 18.2.0

Which example does this report relate to?

with-msw

What browser are you using? (if relevant)

Chrome 107.0.5304.87 (Official Build) (arm64)

How are you deploying your application? (if relevant)

next dev

Describe the Bug

This error shows up when accessing http://localhost:3000:

error - unhandledRejection: Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import './with-msw-app/node_modules/@mswjs/interceptors/lib/interceptors/ClientRequest' is not supported resolving ES modules imported from ./with-msw-app/node_modules/msw/lib/node/index.mjs
Did you mean to import @mswjs/interceptors/lib/interceptors/ClientRequest/index.js?
    at new NodeError (node:internal/errors:387:5)
    at finalizeResolution (node:internal/modules/esm/resolve:400:17)
    at moduleResolve (node:internal/modules/esm/resolve:965:10)
    at defaultResolve (node:internal/modules/esm/resolve:1173:11)
    at nextResolve (node:internal/modules/esm/loader:173:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:852:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:439:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)
    at link (node:internal/modules/esm/module_job:75:36) {
  code: 'ERR_UNSUPPORTED_DIR_IMPORT',
  url: 'file:///with-msw-app/node_modules/@mswjs/interceptors/lib/interceptors/ClientRequest'
}

Expected Behavior

No error should be displayed when accessing http://localhost:3000 and MSW should intercept the first render request (couldn't test it).

To Reproduce

1. npx create-next-app --example with-msw with-msw-app
2. cd with-msw-app
3. yarn dev

You should see the error message in the console when trying to access http://localhost:3000.

[balazsorban44]

Duplicate of #40904 (comment) but this can now be addressed as it has been fixed upstream.

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.