TypeScript definitions of msw/node don't work with modern node16-style module resolution

[nvie]

When switching to "moduleResolution": "node16", imports from "msw/node" no longer work from TypeScript.

Here is a super small Codesandbox reproduction (using all the latest versions). Check the breaking behavior in src/index.ts. Modify tsconfig.json to see it fixed again.

Expectation: it should work no matter what the user's preferred moduleResolution strategy is.

To be clear, actual imports do still work in Node. It's just that TypeScript cannot locate the type defs anymore.

Also, this only affects subpath imports:

import { ... } from "msw/node"
//                   ^^^^^^^^ Breaks 😔
import { ... } from "msw"
//                   ^^^ Still fine 👍

[kettanaito]

Hey, @nvie. Thanks for reporting this.

Strange, as we do have an explicit export for ./node in package.json:

msw/package.json

Lines 15 to 19 in e8205e1

	"./node": {
	"types": "./lib/node/index.d.ts",
	"require": "./lib/node/index.js",
	"default": "./lib/node/index.mjs"
	}

It's worth noting that MSW itself is not an ESM. Can that be related to this issue?

I'm frankly not that familiar with ESM intricacies so any help is welcome here. I used @mattcosta7's expertise quite extensively in this matter, perhaps he would have a suggestion if he has time.

[mattcosta7]

looking quickly at that codesandbox (a tool i'm not familiar with, generally so I might be off)

it appears as though codesandbox doesn't recognize the node16 resolution?

which makes me wonder if that's part of the issue?

locally I seem to have this work properly, with node v18.11.0

{
  "name": "test-msw-node16",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "start": "npx ts-node-esm src/index.ts"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "msw": "0.48.3"
  },
  "devDependencies": {
    "typescript": "4.8.3",
    "ts-node": "10.9.1"
  }
}

{
    "compilerOptions": {
      "module": "ESNext",
      "target": "ESNext",
      "moduleResolution": "node16",
      "sourceMap": true,
      "outDir": "dist"
    },
    "lib": ["es2015"]
  }

// src/index.ts
import { setupServer } from 'msw/node'

console.log(setupServer)

I've locally set the module resolution to node, node16 and nodenext without issue.

Curious to see if you can offer more info on the issue you see, so we can dig into it more. What versions of node/etc are you running (to help compare).

I also am curious why that sandbox seems to not work with node16 for module resolution (or at least, why it warms on the tsconfig - could codesandbox be using a different tsconfig for the editor?)

[mattcosta7]

Ahh - I just caught that the sandbox seems to be on 0.47.x and not 0.48.x

Running 0.48.3 seems to have resolved this, due to at least both of:

• feat: makes the library esm-compatible #1399
• fix: bufferUtils import path #1453

@nvie can you verify that upgrading to 0.48.3 fixes the issue you were seeing?

The error I see with 0.47.x -

> test-msw-node16@1.0.0 start
> npx ts-node-esm src/index.ts

/test-msw-node16/node_modules/ts-node/dist-raw/node-internal-modules-esm-resolve.js:362
    const err = new ERR_UNSUPPORTED_DIR_IMPORT(path, fileURLToPath(base));
                ^
CustomError: ERR_UNSUPPORTED_DIR_IMPORT /test-msw-node16/node_modules/@mswjs/interceptors/lib/interceptors/ClientRequest /test-msw-node16/node_modules/msw/lib/node/index.mjs
    at finalizeResolution (/test-msw-node16/node_modules/ts-node/dist-raw/node-internal-modules-esm-resolve.js:362:17)
    at moduleResolve (/test-msw-node16/node_modules/ts-node/dist-raw/node-internal-modules-esm-resolve.js:801:10)
    at Object.defaultResolve (/test-msw-node16/node_modules/ts-node/dist-raw/node-internal-modules-esm-resolve.js:912:11)
    at /test-msw-node16/node_modules/ts-node/src/esm.ts:218:35
    at entrypointFallback (/test-msw-node16/node_modules/ts-node/src/esm.ts:168:34)
    at /test-msw-node16/node_modules/ts-node/src/esm.ts:217:14
    at addShortCircuitFlag (/test-msw-node16/node_modules/ts-node/src/esm.ts:409:21)
    at resolve (/test-msw-node16/node_modules/ts-node/src/esm.ts:197:12)
    at resolve (/test-msw-node16/node_modules/ts-node/src/child/child-loader.ts:15:39)
    at nextResolve (node:internal/modules/esm/loader:163:28) {
  url: 'file:///test-msw-node16/node_modules/@mswjs/interceptors/lib/interceptors/ClientRequest'

[kettanaito]

Released: v2.0.0 🎉

This has been released in v2.0.0!

• 📄 Release notes
• 📦 npm package

Make sure to always update to the latest version (npm i msw@latest) to get the newest features and bug fixes.

---

Predictable release automation by @ossjs/release.