MSW and Remix: globalThis.XMLHttpRequest is not a constructor

Question

I've tried setting up MSW in my Remix app by copying a few examples (This playwright one and the remix-run example), but every time I get this error:

[mf:err] TypeError: globalThis.XMLHttpRequest is not a constructor
  at checkTypeSupport (../storefront-remix/node_modules/rollup-plugin-node-polyfills/polyfills/http-lib/capability.js:20:11)
  at ../../node_modules/rollup-plugin-node-polyfills/polyfills/http-lib/capability.js (../storefront-remix/node_modules/rollup-plugin-node-polyfills/polyfills/http-lib/capability.js:39:45)
  at ../storefront-remix/apps/shop/dist/worker/index.js:14:56
  at ../../node_modules/rollup-plugin-node-polyfills/polyfills/http-lib/request.js (../storefront-remix/node_modules/rollup-plugin-node-polyfills/polyfills/http-lib/request.js:1:1)
  at ../storefront-remix/apps/shop/dist/worker/index.js:14:56
  at node-modules-polyfills:http (../storefront-remix/apps/shop/dist/worker/node-modules-polyfills:http:30:1)
  at ../storefront-remix/apps/shop/dist/worker/index.js:14:56
  at node-modules-polyfills-commonjs:http (../storefront-remix/apps/shop/dist/worker/node-modules-polyfills-commonjs:http:2:18)
  at ../storefront-remix/apps/shop/dist/worker/index.js:17:50
  at ../../node_modules/@mswjs/interceptors/lib/interceptors/ClientRequest/index.js (../storefront-remix/node_modules/@mswjs/interceptors/src/interceptors/ClientRequest/index.ts:1:1)

The current setup has this file, copied and very slightly updated from the remix-run example linked above:

import { setupServer } from 'msw/node'
import { handlers } from './msw-handlers'

export function startServer() {
  const server = setupServer(...handlers)
  server.listen({ onUnhandledRequest: 'warn' })
  console.log('MSW initialised')
}

And I've tried calling that function at the start of my handleRequest function in app/entry.server.tsx:

export default async function handleRequest(
  request: Request,
  responseStatusCode: number,
  responseHeaders: Headers,
  remixContext: EntryContext & { optimizely: OptimizelyLoadContext }
) {
  startServer()

  const markup = renderToString(
    <RemixServer context={remixContext} url={request.url} />
  )

  responseHeaders.set('Content-Type', 'text/html')

  return new Response('<!DOCTYPE html>' + markup, {
    status: responseStatusCode,
    headers: responseHeaders,
  })
}

I've also tried it at the top of /server.ts as well as in my route file (obviously it shouldn't be that).

The error makes it look like the problem is in the MSW code itself, which is worrying.

Does anyone know what to do here?

MSW and Remix: globalThis.XMLHttpRequest is not a constructor

0 Answers0