Support Edge Runtime (no http module)

Scope

Improves an existing behavior

Compatibility

• This is a breaking change

Feature description

NextJS has introduced an Edge Runtime (more docs here, which is a stricter node.js runtime based on web standards to run “on the edge”. This is used, for example, but their middleware.

I am performing user authentication in this middleware, and would like to mock the fetch requests I make in my middleware. This means I need MSW to be compatible with the edge runtime and support intercepting fetch requests made there.

I have cloned the with-msw example and added a middleware.ts file which makes a simple fetch request. The failure can be seen in my repository: with-msw-app

The error I see when trying to run this is:

error - unhandledRejection: Error: The edge runtime does not support Node.js 'http' module.
Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime
    at Object.get (webpack-internal:///(middleware)/./node_modules/next/dist/server/web/adapter.js:172:19)
    at __extends (webpack-internal:///(middleware)/./node_modules/@mswjs/interceptors/lib/interceptors/ClientRequest/NodeClientRequest.js:15:73)
    at eval (webpack-internal:///(middleware)/./node_modules/@mswjs/interceptors/lib/interceptors/ClientRequest/NodeClientRequest.js:102:5)
    at eval (webpack-internal:///(middleware)/./node_modules/@mswjs/interceptors/lib/interceptors/ClientRequest/NodeClientRequest.js:441:2)
    at Object.(middleware)/./node_modules/@mswjs/interceptors/lib/interceptors/ClientRequest/NodeClientRequest.js (evalmachine.<anonymous>:161:1)
    at __webpack_require__ (evalmachine.<anonymous>:37:33)
    at fn (evalmachine.<anonymous>:281:21)
    at eval (webpack-internal:///(middleware)/./node_modules/@mswjs/interceptors/lib/interceptors/ClientRequest/http.get.js:25:27)
    at Object.(middleware)/./node_modules/@mswjs/interceptors/lib/interceptors/ClientRequest/http.get.js (evalmachine.<anonymous>:172:1)
    at __webpack_require__ (evalmachine.<anonymous>:37:33)
error - Error [TypeError]: fetch failed
    at Object.processResponse (evalmachine.<anonymous>:3163:27)
    at <unknown> (evalmachine.<anonymous>:3507:42)
    at <unknown> (node:internal/process/task_queues:141:7)
    at AsyncResource.runInAsyncScope (node:async_hooks:199:9)
    at AsyncResource.runMicrotask (node:internal/process/task_queues:138:8)
    at processTicksAndRejections (node:internal/process/task_queues:96:5) {
  middleware: true
}

[kristojorg]

This relates to https://github.com/mswjs/msw/issues/1404 probably and possible https://github.com/mswjs/msw/issues/1388

[kettanaito]

I will also move this to a discussion because, as I’ve said, there’s no intention on working on this any time soon.