Browser: Cannot read properties of undefined (reading 'url')

[hal-shin]

Prerequisites

• I confirm my issue is not in the opened issues
• I confirm the Frequently Asked Questions didn't contain the answer to my issue

Environment check

• I'm using the latest msw version
• I'm using Node.js version 18 or higher

Browsers

Chromium (Chrome, Brave, etc.)

Reproduction repository

https://github.com/hal-shin/msw-bug

Reproduction steps

Run yarn install
Run yarn start

If server starts normally, kill the server and run yarn start again. Within ~5 server restarts, you run into the error.

It looks like the following line (line 21, createResponseListener.ts) is the problem:

const request = context.requests.get(requestId)!

Whereby request is undefined.

Current behavior

caught TypeError: Cannot read properties of undefined (reading 'url') at createResponseListener.ts:58:1 at ServiceWorkerContainer.<anonymous> (setupWorker.ts:84:1)

Expected behavior

Server to start without errors or crashing every time.

[lisatassone]

I have also encountered this issue when using the bypass method for a proxied request.

Following the path the request takes, you can see that it bails out here, and never emits the REQUEST event to add the id to the context later used in the recent change:

    /**
     * Set response URL if it's not set already.
     * @see https://github.com/mswjs/msw/issues/2030
     * @see https://developer.mozilla.org/en-US/docs/Web/API/Response/url
     */
    if (!response.url) {
      Object.defineProperty(response, 'url', {
        value: request.url,
        enumerable: true,
        writable: false,
      })
    }

[hal-shin]

Looks like the good people of msw are looking into this issue 🙏

In the meanwhile, a workaround is to revert to 2.1.4 until an official solution is pushed.

[kettanaito]

I've opened a fix in #2094 (based on the great discussion in #2054. Should be fixed soon.

[kettanaito]

Released: v2.2.6 🎉

This has been released in v2.2.6!

• 📄 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.

[Codermar]

I still see this issue in "msw": "^2.2.13". A Regression maybe?

[kettanaito]

@Codermar, the fix was in the worker script so please make sure to update it as well:

npx msw init <PUBLIC_DIR>

[Codermar]

@Codermar, the fix was in the worker script so please make sure to update it as well:

npx msw init <PUBLIC_DIR>

Thank you! That resolved the error.

[erictompkins]

I am getting this issue with version 2.2.13.

I ran npx msw init <PUBLIC_DIR> and that didn't resolve the issue. (I replace <PUBLIC_DIR> with our public directory. Do you have any other suggestions?

The first time that I run my local server everything is fine. But, when I edit any files and the server hot reloads, this issue comes up. Or, if I simply reload the page the issue crops up.

I tried downgrading to 2.2.6 but the issue is still happening. I'm back on 2.2.13 now and unable to do local development because of this.

Below is the mockServiceWorker.js file:

/* eslint-disable */
/* tslint:disable */

/**
 * Mock Service Worker.
 * @see https://github.com/mswjs/msw
 * - Please do NOT modify this file.
 * - Please do NOT serve this file on production.
 */

const PACKAGE_VERSION = '2.2.13'
const INTEGRITY_CHECKSUM = '26357c79639bfa20d64c0efca2a87423'
const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
const activeClientIds = new Set()

self.addEventListener('install', function () {
  self.skipWaiting()
})

self.addEventListener('activate', function (event) {
  event.waitUntil(self.clients.claim())
})

self.addEventListener('message', async function (event) {
  const clientId = event.source.id

  if (!clientId || !self.clients) {
    return
  }

  const client = await self.clients.get(clientId)

  if (!client) {
    return
  }

  const allClients = await self.clients.matchAll({
    type: 'window',
  })

  switch (event.data) {
    case 'KEEPALIVE_REQUEST': {
      sendToClient(client, {
        type: 'KEEPALIVE_RESPONSE',
      })
      break
    }

    case 'INTEGRITY_CHECK_REQUEST': {
      sendToClient(client, {
        type: 'INTEGRITY_CHECK_RESPONSE',
        payload: {
          packageVersion: PACKAGE_VERSION,
          checksum: INTEGRITY_CHECKSUM,
        },
      })
      break
    }

    case 'MOCK_ACTIVATE': {
      activeClientIds.add(clientId)

      sendToClient(client, {
        type: 'MOCKING_ENABLED',
        payload: true,
      })
      break
    }

    case 'MOCK_DEACTIVATE': {
      activeClientIds.delete(clientId)
      break
    }

    case 'CLIENT_CLOSED': {
      activeClientIds.delete(clientId)

      const remainingClients = allClients.filter((client) => {
        return client.id !== clientId
      })

      // Unregister itself when there are no more clients
      if (remainingClients.length === 0) {
        self.registration.unregister()
      }

      break
    }
  }
})

self.addEventListener('fetch', function (event) {
  const { request } = event

  // Bypass navigation requests.
  if (request.mode === 'navigate') {
    return
  }

  // Opening the DevTools triggers the "only-if-cached" request
  // that cannot be handled by the worker. Bypass such requests.
  if (request.cache === 'only-if-cached' && request.mode !== 'same-origin') {
    return
  }

  // Bypass all requests when there are no active clients.
  // Prevents the self-unregistered worked from handling requests
  // after it's been deleted (still remains active until the next reload).
  if (activeClientIds.size === 0) {
    return
  }

  // Generate unique request ID.
  const requestId = crypto.randomUUID()
  event.respondWith(handleRequest(event, requestId))
})

async function handleRequest(event, requestId) {
  const client = await resolveMainClient(event)
  const response = await getResponse(event, client, requestId)

  // Send back the response clone for the "response:*" life-cycle events.
  // Ensure MSW is active and ready to handle the message, otherwise
  // this message will pend indefinitely.
  if (client && activeClientIds.has(client.id)) {
    ;(async function () {
      const responseClone = response.clone()

      sendToClient(
        client,
        {
          type: 'RESPONSE',
          payload: {
            requestId,
            isMockedResponse: IS_MOCKED_RESPONSE in response,
            type: responseClone.type,
            status: responseClone.status,
            statusText: responseClone.statusText,
            body: responseClone.body,
            headers: Object.fromEntries(responseClone.headers.entries()),
          },
        },
        [responseClone.body],
      )
    })()
  }

  return response
}

// Resolve the main client for the given event.
// Client that issues a request doesn't necessarily equal the client
// that registered the worker. It's with the latter the worker should
// communicate with during the response resolving phase.
async function resolveMainClient(event) {
  const client = await self.clients.get(event.clientId)

  if (client?.frameType === 'top-level') {
    return client
  }

  const allClients = await self.clients.matchAll({
    type: 'window',
  })

  return allClients
    .filter((client) => {
      // Get only those clients that are currently visible.
      return client.visibilityState === 'visible'
    })
    .find((client) => {
      // Find the client ID that's recorded in the
      // set of clients that have registered the worker.
      return activeClientIds.has(client.id)
    })
}

async function getResponse(event, client, requestId) {
  const { request } = event

  // Clone the request because it might've been already used
  // (i.e. its body has been read and sent to the client).
  const requestClone = request.clone()

  function passthrough() {
    const headers = Object.fromEntries(requestClone.headers.entries())

    // Remove internal MSW request header so the passthrough request
    // complies with any potential CORS preflight checks on the server.
    // Some servers forbid unknown request headers.
    delete headers['x-msw-intention']

    return fetch(requestClone, { headers })
  }

  // Bypass mocking when the client is not active.
  if (!client) {
    return passthrough()
  }

  // Bypass initial page load requests (i.e. static assets).
  // The absence of the immediate/parent client in the map of the active clients
  // means that MSW hasn't dispatched the "MOCK_ACTIVATE" event yet
  // and is not ready to handle requests.
  if (!activeClientIds.has(client.id)) {
    return passthrough()
  }

  // Notify the client that a request has been intercepted.
  const requestBuffer = await request.arrayBuffer()
  const clientMessage = await sendToClient(
    client,
    {
      type: 'REQUEST',
      payload: {
        id: requestId,
        url: request.url,
        mode: request.mode,
        method: request.method,
        headers: Object.fromEntries(request.headers.entries()),
        cache: request.cache,
        credentials: request.credentials,
        destination: request.destination,
        integrity: request.integrity,
        redirect: request.redirect,
        referrer: request.referrer,
        referrerPolicy: request.referrerPolicy,
        body: requestBuffer,
        keepalive: request.keepalive,
      },
    },
    [requestBuffer],
  )

  switch (clientMessage.type) {
    case 'MOCK_RESPONSE': {
      return respondWithMock(clientMessage.data)
    }

    case 'PASSTHROUGH': {
      return passthrough()
    }
  }

  return passthrough()
}

function sendToClient(client, message, transferrables = []) {
  return new Promise((resolve, reject) => {
    const channel = new MessageChannel()

    channel.port1.onmessage = (event) => {
      if (event.data && event.data.error) {
        return reject(event.data.error)
      }

      resolve(event.data)
    }

    client.postMessage(
      message,
      [channel.port2].concat(transferrables.filter(Boolean)),
    )
  })
}

async function respondWithMock(response) {
  // Setting response status code to 0 is a no-op.
  // However, when responding with a "Response.error()", the produced Response
  // instance will have status code set to 0. Since it's not possible to create
  // a Response instance with status code 0, handle that use-case separately.
  if (response.status === 0) {
    return Response.error()
  }

  const mockedResponse = new Response(response.body, response)

  Reflect.defineProperty(mockedResponse, IS_MOCKED_RESPONSE, {
    value: true,
    enumerable: true,
  })

  return mockedResponse
}

[GHEMID-Mohamed]

Same as @erictompkins ! Even the version 2.3.0 didn't resolve my problem !

[GHEMID-Mohamed]

Solved! My problem was that my application was rendered before the worker is initiated! I've followed the documentation by deffering rendering my application after the initialization of the worker :

async function enableMocking() {
    if (process.env.APP_MODE === 'mock') {
        const { mockServer } = await import('__mocks__/setup');
        return mockServer.start();
    }
    return Promise.resolve();
}

enableMocking().then(() => {
    createRoot(document.getElementById('root') as HTMLElement).render(<App />);
});