mswjs / mswjs.io

Official website and documentation for the Mock Service Worker library.
https://mswjs.io
151 stars 177 forks source link

This lib breaks storybook with wp5 #407

Closed AdrianDiazG closed 2 months ago

AdrianDiazG commented 2 months ago

Issue

I get infinite calls to webpack hmr

It's been impossible to implement this library with storybook and wp5, I've tried implementing a loader myself, I tried the loader from msw-storybook-addon, I also tried with a wrapper component and start-stop the worker on mount/unmount with useEffect, I tried with an empty serviceWorder, no handlers, also tried setting the scope option for the worker. It seems that no matter what, when worker.start is called I get errors and ifinite calls, this is beyond me and I can't find any related documentation anywhere

this is what I get infinitely, this also seems to hapen on storybook reload, not in the first load

image

context:

versions:

"msw": "^2.3.1",
"msw-storybook-addon": "^2.0.2",
"storybook": "^8.1.1",
"webpack": "^5.75.0",
kettanaito commented 2 months ago

Hi, @AdrianDiazG.

Can you please share the errors you get? Above is some logging that doesn't come from MSW.

I shouldn't need any custom loaders to use MSW with Storybook. The docs in https://github.com/mswjs/msw-storybook-addon should be enough. Happy to help once you provide more details or, ideally, a reproduction repo. Thanks.

AdrianDiazG commented 2 months ago

thanks for the quick response @kettanaito, well, that's the thing I don't get any errors, just infinite calls when I execute worker.start or initialize in the case of the addon, however I'm not making any calls in my components, the only line I have in the worker right now is console.log('mockServiceWorker started') which I see on the first load (which doesn't produce infinite calls) but as soon as it hot reloads or if I manually reload the page, I don't see the "mockServiceWorker started" message (which is expected I think) but it makes these infinite calls, no error messages. If you could give me a hint on what additional details I could give you, I'd be happy to get on it

AdrianDiazG commented 2 months ago

It actually seems to be this same issue:

but I tried the solutions proposed unsuccessfully :(

AdrianDiazG commented 2 months ago

I think I finally solved it. I realized that the problem was gone if I toggled the "bypass for network" option for the service worker on developer tools, so I used the msw-storybook-addon's initialize like this:


initialize({
  serviceWorker: {
    options: {
      updateViaCache: 'none'
    }
  }
})