Support Edge Runtime (no http module)

[kristojorg]

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 #1404 probably and possible #1388

[kristojorg]

From a brief inspection, this looks like it would be supported by creating a third startup option: setupEdgeServer which only uses the FetchInterceptor, not the XMLHttpRequestInterceptor.

[kettanaito]

I wonder if we should use interceptors based on the availability of those modules.

setupServer([
  typeof XMLHttpRequest !== 'undefined' && XMLHttpRequestInterceptor
])

Will be hard to figure out Node.js built-ins like http, I guess.

Overall, edge support would be great but I don't see it as a priority anytime soon. If someone would like to make this happen without reworking much of the library, I'd be open to releasing it.

I think the conceptual issue here is that such Edge runtimes are still a custom thing. They do respect the standards but http is also a standard in Node.js. It comes down to the edge functions adhering to the web standards, not Node.js ones (feel free to correct me).

[kettanaito]

To make things a little more complex, there's no such thing as a standardized Edge environment. There's the browser and there's Node.js. I suppose edge frameworks try to emulate Node.js but may be implemented in different languages and the standard library is usually limited and incomplete. This makes it not an actual environment, really, but an infinite list of subsets of an environment.

Indeed, things may get a little easier with Edge frameworks adopting web standards, which some of the most popular ones already do, and MSW adopting them as well. But both those things need to happen for us to claim Edge support, for "Edge" is not really the same thing when referred to by different people.

I may be terribly wrong on these things so do not hesitate to correct me.

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