fetchEvent.respondWith Receives an Error in Safari Only

Environment

Name	Version
msw	0.25.0
browser	Safari 14.0.2
OS	MacOS Catalina

Request handlers

// Example of declaration. Provide your code here.
import { setupWorker } from 'msw'

const handlers = [
  graphql.query('MeQuery', (_req, res, ctx) => {
    return res(
      ctx.data({
        ...
      }),
    );
  }),
  ...
];

const worker = setupWorker(...handlers)

worker.start()

Actual request

// Example of making a request. Provide your code here.
export const getMe = async () => {
  try {
    const response = await fetch(MOCK_URL, {
      headers: {
        'Content-Type': 'application/json',
      },
      method: 'POST',
      body: meQuery(),
    });
    ...
  } catch {
    ...
  }
};

Current behavior

On Chrome & Firefox, everything is fine. In Safari, it seems like the request gets intercepted, as I see the mock response in the console, but then the service worker throws an error, causing the fetch call to catch with error [Error] FetchEvent.respondWith received an error: Returned response is null. (see screenshot). Not sure why it’s trying to connect to localhost:8642. That’s the local server I run when not using mocks.

Expected behavior

The fetch should return the mock response and not throw an error.

Screenshots

[kodai3]

@kettanaito

Hi, thank you for your works.

I’m experiencing this issue on Safari 15.3(17612.4.9.1.8) with msw 0.42.3 Is it possible that it has recurred on updated Safari or msw?

[kettanaito]

While the root cause of the issue is related to #529, there’s a different client retrieval logic happening in Safari. The following expression throws in Safari only:

https://github.com/mswjs/msw/blob/c45cf148784780b352215d79c3d3cfa5ad50e5b4/src/mockServiceWorker.js#L193

This can be fixed by determining the worker’s client once, on the parent scope of the “fetch” event, and then reusing in both event.respondWith() and in the .then() chain responsible for sending back the original/mocked response to the client. I’ll issue a pull request later today/tomorrow.