with-msw: unhandledRejection: Error [ERR_UNSUPPORTED_DIR_IMPORT]

[lrholmes]

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.4.0: Mon Feb 21 20:35:58 PST 2022; root:xnu-8020.101.4~2/RELEASE_ARM64_T6000
    Binaries:
      Node: 16.13.1
      npm: 8.1.2
      Yarn: 1.22.19
      pnpm: 7.11.0
    Relevant packages:
      next: 12.3.2-canary.7
      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)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

After starting the app, in the console I see the following error:

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?

This looks related to the most recent version of msw, related issue here: mswjs/msw#1267

Expected Behavior

I expect the page to render without any errors.

To Reproduce

Install and start the with-msw example:

$ yarn create next-app --example with-msw with-msw-app
$ cd with-msw-app
$ yarn dev

Go to http://localhost:3000/ and you should see a Server Error page. In the next dev logs there will be two errors — one for the msw service failing to start and another for the consequent failed network request.

[balazsorban44]

This seems to be an upstream issue. Once it is fixed in msw, the package version can be updated as in the case of #40775, #40777.

You can follow mswjs/msw#1399 for updates.

Since the package is published with ESM exports, Next.js will try to use those. To opt out, you can set the following as a workaround:

/** @type {import("next").NextConfig} */
module.exports = {
  experimental: {
    esmExternals: false,
  },
}

Since we cannot do anything about this at the moment, I'm going to close the issue, but feel free top open a PR with an upgrade when the issue is fixed in msw. 🙏

[lrholmes]

All good, thanks for the tip on the esmExternals flag, that fixed this issue for me. I was going to ask if the example should be updated with this as a temporary solution (as it is currently broken) but it does look like that mswjs/msw#1399 PR is very close to being merged — hopefully in the meantime this issue will be found by anyone who runs into the same problem!

Have watched the related issue and will try to contribute the bump when it's ready 🙏

[ricardixbr]

PS: it was necessary to delete the .next directory

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