Function use() not work in browser

Environment

Name	Version
msw	0.36.8
browser	Chrome

Request handlers

browser.ts

import { rest, setupWorker } from 'msw';

const worker = setupWorker(...);

window.msw = {
    worker,
    rest,
};

export { worker };

worker.ts

import { worker } from '../../mocks/browser';

export const setupMsw = () => {
    return worker.start({
        onUnhandledRequest: 'bypass',
        serviceWorker: {
            url: process.env.CI ? SOME_PATH/mockServiceWorker.js : '/mockServiceWorker.js',
        },
    }).then(() => {
        window.msw.ready = true;
    });
};

Current behavior

1. Open the page where mock url uses
2. Check that mock url fired correctly and mock data received successfully
3. Open browser console and try to change mock data with use() function

window.msw.worker.use(
    window.msw.rest.get('**/rest/shops', (_req, res, ctx) => {
        return res(
            ctx.json([]),
        );
    }),
);

1. Try to use printHandlers() function. I see old and new mock urls

window.msw.worker.printHandlers()

[rest] GET /rest/shops
—- SOME OTHERS —-
[rest] GET /rest/shops

1. Try to fetch mock url one more time in browser console

fetch('/rest/shops')

1. I can see 2 debug messages in browser console (old and new mocks fired)

[MSW] 14:01:37 GET /rest/shops (200 OK)
[MSW] 14:01:37 GET /rest/shops (200 OK)

1. Response from fetch are equal old mock (not new from use() function)

Expected behavior

1. Response from fetch are equal new mock

I try to write e2e test with PlaywrightJs and in my test use() function working not correct. So, I try to reproduce my case in browser and I see the same error which I described earlier.

Could you help me with this issue Thank you!

[kazeichev]

@florianmatz Yes, I have got two workers.start() in different place of app.

[florianmatz]

@kazeichev Mmhhh… And how did you find out? Did you have two worker.start() or something?