Error [ERR_UNSUPPORTED_DIR_IMPORT] on latest version of MSW (even when the project is not "type": "module")

[AleskiWeb]

Prerequisites

• I confirm my issue is not in the opened issues
• I confirm the Frequently Asked Questions didn't contain the answer to my issue

Environment check

• I'm using the latest msw version
• I'm using Node.js version 14 or higher

Node.js version

16.18

Reproduction repository

https://github.com/AleskiWeb/mswjs-next

Reproduction steps

I know there is a lot of discussion in issues here on the project relating directly to ESM support, however I don't think I am trying to use this as a module but still keep running up against the same error.

Happy to be told otherwise! I am just lost with the steps to get me out of this tailspin.

Furthermore, using https://github.com/vercel/next.js/tree/canary/examples/with-msw also has the same error in the console

The above repository was made using the simple setup instructions from the nextjs docs, followed by an implementation of the MSW docs (currently mocking nothing but the error still persists)

• Clone the project
• yarn
• yarn dev
• visit localhost:3000

Current behavior

• There is an error in the terminal relating to ESM and index.mjs

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
event - compiled client and server successfully in 735 ms (160 modules)
wait  - compiling / (client and server)...
event - compiled client and server successfully in 713 ms (429 modules)
error - unhandledRejection: Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/Users/NAME/projects/mswjs-next/node_modules/@mswjs/interceptors/lib/interceptors/ClientRequest' is not supported resolving ES modules imported from /Users/NAME/projects/mswjs-next/node_modules/msw/lib/node/index.mjs
Did you mean to import @mswjs/interceptors/lib/interceptors/ClientRequest/index.js?

Expected behavior

• I should be hitting the index.js in the lib/node/ folder

[leonardmns12]

having the same issue here with the latest next.js & msw version

[mtsewrs]

Are there any alternatives to msw with next? Tried nock but it's not as nice

[yousefhany77]

i fixed that in my code... it's bug I hope they fix it

go to msw>lib>node>index.mjs
line 45,46

--fix
import { ClientRequestInterceptor } from "@mswjs/interceptors/lib/interceptors/ClientRequest/index.js";
import { XMLHttpRequestInterceptor } from "@mswjs/interceptors/lib/interceptors/XMLHttpRequest/index.js";

--old--with--pug
import { ClientRequestInterceptor } from "@mswjs/interceptors/lib/interceptors/ClientRequest";
import { XMLHttpRequestInterceptor } from "@mswjs/interceptors/lib/interceptors/XMLHttpRequest";

[vnglst]

If you're looking for a quick/temporary fix for usage with next.js, you can force next to NOT use ESM modules in packages.

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

See: vercel/next.js#40904

[harm-meijer]

@AleskiWeb Can you tell me what version of msw is this and what version will still work? I tried specifically with 0.47.2 but still have that error

[AleskiWeb]

@harm-meijer - Latest version still has these issues (albeit a different import it complains about now)

The only work around was to use the experimental flag above

[AleskiWeb]

#1453 This was merged recently, maybe 0.48.1 and above will have this change and should work

[AleskiWeb]

Although there are still bits missing in support for ESM stuff, this particular issue has been fixed so I will close this, thanks all!