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:

https://github.com/mswjs/msw-storybook-addon/assets/107425534/a5931f24-9569-44bc-b620-97b621f83e01

[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

• msw-storybook-addon@2.0.0--canary.122.b3ed3b1.0
• msw@2.0.8

did not help

[AdrianDiazG]

Same problem here

[AdrianDiazG]

it can be related to this one: https://github.com/mswjs/msw-storybook-addon/issues/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],
    ...
};

[aygee]

I experienced the same issue on one of my google chrome profile. Interestingly, it works fine on my other chrome profile.

I tried to disable all extensions but could not get rid of the issue on the problematic profile.

Maybe try to run it on a different google chrome profile and see if it behaves differently?

[aygee]

Update: Deleting the profile and adding the same one (I have mine synced) fixes it. It's a weird bug but hopefully it helps.