Hi, @IrishBruse. I hope you don't mind me moving the discussion around the fix here.

Update

Your solution does work but it doesn't account for nested clients (i.e. requests coming from iframes). In those cases, the clientId will point to the child frame and not the frame that has registered the worker (the parent). Thus, the child ID is never be in the activeClientIds, resulting in requests originating from the child frames being unhandled.

That's a pickle because resolving the actual client id is an asynchronous action (we already have the resolveMainClient() utility in the worker) and you cannot cal asynchronous code before event.respondWith(), that's a no-op. Even reading the Client from clientId is an async action.

Update

Since the original proposal breaks the nested frames support, I'm trying to remove the need in context.requests, in the first place. The RESPONSE event from the worker script will now forward the entire serialized request associated with that response. It's a bit more expensive since now it would have to (1) clone the request one more time in order to (2) read its body for the request instance to be properly transferred to the client.

That being said, I don't expect any performance degradation or impact, for that matter, from this change.

Open in StackBlitz

npm i https://pkg.pr.new/msw@2510

commit: 06b1133

I updated my repo to use this build during our tests (vitest browser). This version seem to fix the Cannot read properties of undefined (reading 'url') error. Thanks for the fix!

Note: I've seen the comment about the worker script. In my case no such thing was required. I created this little vite plugin for msw running in the browser:

export const mockServiceWorkerPlugin = (): PluginOption => ({
    name: 'add-mock-server',
    apply: 'serve',
    configureServer: (server) => {
        server.middlewares.use((req, res, next) => {
            if (!req.url?.endsWith('mockServiceWorker.js')) {
                return next();
            }
            res.setHeader('Content-Type', 'text/javascript');
            res.statusCode = 200;
            res.write(readFileSync(resolve('./node_modules/msw/lib/mockServiceWorker.js')));
            res.end();
        });
    },
});

@dmezei, thank you so much for confirming!

I was just thinking about making a Vite plugin for MSW's worker yesterday! What a coincidence. Still weighing the pros and cons but thinking it would be worth it. We can have a simple plugin that appends a new route handler to Vite's dev server and make it serve /mockServiceWorker.js from node_modules. No more worker updates!

If you feel like it, you can suggest this as a feature so we can track it. Thanks.

Released: v2.9.0 🎉

This has been released in v2.9.0!

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