Directory import is not supported resolving ES modules

[TimDaub]

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

v16.14.2

Reproduction repository

see inline

Reproduction steps

• I'm following https://github.com/mswjs/msw#node

index.mjs

import { setupServer } from "msw/node";

node index.mjs
node:internal/process/esm_loader:94
    internalBinding('errors').triggerUncaughtException(
                              ^

Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/Users/timdaub/Projects/music-os-core/node_modules/msw/node' is not supported resolving ES modules imported from /Users/timdaub/Projects/music-os-core/index.mjs
Did you mean to import msw/node/lib/index.js?
    at new NodeError (node:internal/errors:371:5)
    at finalizeResolution (node:internal/modules/esm/resolve:414:17)
    at moduleResolve (node:internal/modules/esm/resolve:983:10)
    at defaultResolve (node:internal/modules/esm/resolve:1080:11)
    at ESMLoader.resolve (node:internal/modules/esm/loader:530:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:251:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:79:40)
    at link (node:internal/modules/esm/module_job:78:36) {
  code: 'ERR_UNSUPPORTED_DIR_IMPORT',
  url: 'file:///Users/timdaub/Projects/music-os-core/node_modules/msw/node'

Current behavior

• msw crashes with notes about ES modules.

Expected behavior

• msw doesn't crash and respects nodejs requirements about directory imports

[kettanaito]

Hey, @TimDaub. Thanks for reporting this.

I believe the issue is not in the example but in the configuration. Perhaps we need to configure something additionally to let .mjs import msw/node properly. Would you be interested in researching this?

[TimDaub]

Here's how I think this should be fixed:

• first address the technical issue (my PR resolves it)
• then in a follow up issue, outline why directly linking to a file constitutes a problem because e.g. to me it doesn't (IMO: explicit better than implicit)

[kettanaito]

I'm tentative to merge anything until this is properly looked into. There is no technical issue at hand: having to require /index.js is a contextual knowledge of anybody who's using ES modules in Node.js. It will stand true outside of MSW, so I see no reason to alter the documentation that works for the consumers of other module formats.

What interests me:

• Is it a hard limitation that all ESM directories must be imported using an explicit /index.js reference?
• Is it perhaps a misconfiguration in package.json on the library's side, where we should tell Node.js to resolve directories like in, well, Node.js.

[TimDaub]

• https://nodejs.org/api/esm.html#resolver-algorithm see list of cases where errors are thrown

As a nodejs developer being aware of unsupported directory imports, it requires contextual knowledge that msw wants me to use them anyways in ES modules.

[antoinerey]

I'd like to add my two cents to the discussion as well.

I've been struggling with using both msw and vite-node in the same project. While it used to work with previous versions of vite-node, a recent update "broke" that behaviour. After discussing a little bit there, it seems that the root cause is some missing properties on msw package.json side.

• "type": "module"
• "exports": { ... }

They shared with me a repository that explains how that resolution algorithm works, and how to fix it. Maybe it could be useful to move forwards on this as well?

[kettanaito]

Thanks for the input, @antoinerey!

That's the way ESM adoption progresses: it's hard and has no backward compatibility. ESM works well only with other ESM. It's like an async/await cascading experience-wise.

MSW is not an ESM in terms of "type": "module". We have to assess what migrating to ESM-first would mean for our users before jumping to conclusions. A lot of people are running Node.js 12, so hard-migrating to ESM would break things for them.

As a nodejs developer being aware of unsupported directory imports, it requires contextual knowledge that msw wants me to use them anyways in ES modules.

I think this may be resolved by introducing explicit module mapping, like exports in package.json like @antoinerey suggests above. Would anybody be interested in giving this a try? The goal is to make MSW compatible with the ESM environment but don't rewrite it to be a native ESM just yet.

[kettanaito]

Closing this. See the explanation in #1202.

[TimDaub]

Thanks for wasting my time.

[dewald-els-arribatec]

We are running msw in a NextJS project using TypeScript and experience a similar error. Any feedback/help would be greatly appreciated, since it is directly linked to the msw lib.

Package Versions:

{
  "dependencies": {
      "next": "12.1.6"
      "msw": "^0.47.3"
      "typescript": "4.6.4"
  }
}

Error in Terminal

error - Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/Users/.../Projects/Arribatec/frontdesk-admin/node_modules/@mswjs/interceptors/lib/interceptors/C
lientRequest' is not supported resolving ES modules imported from /Users/.../Projects/Arribatec/frontdesk-admin/node_modules/msw/lib/node/index.mjs
Did you mean to import @mswjs/interceptors/lib/interceptors/ClientRequest/index.js?
Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/Users/.../Projects/Arribatec/frontdesk-admin/node_modules/@mswjs/interceptors/lib/interceptors/ClientReq
uest' is not supported resolving ES modules imported from /Users/.../Projects/Arribatec/frontdesk-admin/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:425:17)
    at moduleResolve (node:internal/modules/esm/resolve:1006:10)
    at defaultResolve (node:internal/modules/esm/resolve:1214:11)
    at nextResolve (node:internal/modules/esm/loader:165:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:844:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:431: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:///Users/.../Projects/Arribatec/frontdesk-admin/node_modules/@mswjs/interceptors/lib/interceptors/ClientRequest',
  page: '/'

Import in _app.tsx

// file: ./pages/_app.tsx
import { setupWorker } from "msw";
import { setupServer } from "msw/node";

if (process.env.MOCK_API && /TRUE|true/.test(process.env.MOCK_API)) {
  typeof window === "undefined"
    ? setupServer(...handlers).listen()
    : setupWorker(...handlers).start();
}
....

[kettanaito]

Please read this

There is no support for ESM right now. MSW simply doesn't ship as ESM so you cannot use it in your ESM setup. There's no need to report it as an issue because it's a known missing feature.

Great but what should I do?

• Go to ESM support + treeshaking unused bits #1384
• Contribute.

Don't expect things to magically happen. We all have lives and we all have jobs. If you need ESM support for work, then dedicate your working time to make it happen. If you need ESM support for hobby projects, then dedicate your spare time to make it happen. If you expect the same from me, than I see no reason not to expect the same from you.

With that being said, I'm locking this conversation.