Storybook keeps reloading when this add-on is enabled

[szymonnowak-st]

Hi!

I've got an issue that whenever this add-on is enabled and Chrome dev tools is opened, Storybook keeps reloading the page, which makes it impossible to use. When I unregister the worker (via Chrome dev tools: Application -> Storage -> Clear site data), it stops reloading, but then when I manually reload the page it starts reloading the page constantly again. When I close Chrome dev tools it works again.

Has anyone else encountered such behavior before? It happens in incognito mode as well, so it's most likely not caused by some extensions, but rather because of some strange setting that I have enabled. It only happens in Chrome for me, it works correctly in Firefox and Safari. Other people on the team do not have this issue...

I'm using storybook/react 6.5.16, msw 1.2.1, and msw-storybook-addon 1.8.0 and webpack 5.

Unfortunately, I don't have a small example that reproduces this problem, but I recorded a video:

msw-storybook-addon-issue.mp4

[boonya]

Do you use mock service worker? Because I do. Once removed the issue disappeared.
I am just trying to say that the root cause somewhere under the hood of MSW, maybe.

P.S. Sorry, I see you use it.

FYI, in my case

• storybook: ^7.5.3
• msw: ^1.3.2
• msw-storybook-addon: ^1.10.0

[boonya]

P.S.
Upgrade to

• [email protected]
• [email protected]

did not help

[AdrianDiazG]

Same problem here

[AdrianDiazG]

it can be related to this one:
#36

[boonya]

With the setup below no issue anymore on my end. But it's not possible to open a story in a separate window now. Seems loader is defined somewhere outside of iframe.

// .storybook/preview.tsx
import type {Preview, Decorator, Parameters} from '@storybook/react';
import {initialize, mswDecorator, mswLoader} from 'msw-storybook-addon';

initialize({
    serviceWorker: {url: `${APP_PREFIX}mockServiceWorker.js`},
    onUnhandledRequest: 'bypass',
});

export const decorators: Decorator[] = [
    ...
    mswDecorator,
    ...
];

const parameters: Parameters = {
    loaders: [mswLoader],
    ...
};