Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[BUG] Interference with HMR #36

Open
Zombobot1 opened this issue Jun 17, 2021 · 6 comments
Open

[BUG] Interference with HMR #36

Zombobot1 opened this issue Jun 17, 2021 · 6 comments
Labels
bug Something isn't working needs reproduction

Comments

@Zombobot1
Copy link

Versions:
"msw": "0.27.2",
"msw-storybook-addon": "1.1.0",

I often get an error which forces me to reload storybook page.
image

I suppose that MSW intercepts one of HMR requests and fails.

At the same time I see this error in console:
[MSW] Failed to mock a "GET" request to "http://localhost:6006/4cb31fa2eee22cf5b32f.hot-update.json": TypeError: Cannot read property 'id' of undefined at handleRequest (http://localhost:6006/mockServiceWorker.js:117:34)

@Zombobot1
Copy link
Author

I had to turn off this addon, because my storybook got completely broken. It cannot load anything and my console is full of errors like this:
image

@yannbf yannbf added bug Something isn't working needs reproduction labels Nov 21, 2021
@shiraze
Copy link

shiraze commented Jul 13, 2022

I have a similar issue when using fetch-mock - see storybookjs/storybook#18702

@Arttse
Copy link

Arttse commented Apr 4, 2023

Faced the same problem when using this. I've found solution from this discussion mswjs/msw#1424 by creating custom worker with filtering by URL.

For example, create custom worker:

// public/apiMockServiceWorker.js
self.addEventListener('fetch', (event) => {
  const url = new URL(event.request.url);

  if (!url.pathname.startsWith('/api/')) {
    // Do not propagate this event to other listeners (from MSW)
    event.stopImmediatePropagation();
  }
});

importScripts('./mockServiceWorker.js');

then initialize with custom worker:

// .storybook/preview.js
import { initialize, mswDecorator } from 'msw-storybook-addon';

// Initialize MSW with custom worker
initialize({
  serviceWorker: { url: '/apiMockServiceWorker.js' },
});

now MSW intercepts only URLs with pathname starts with /api/, like http://localhost/api/items other will be go through over the network, so HMR now works.

@yannbf
Copy link
Collaborator

yannbf commented Apr 21, 2023

Hey @Arttse thank you so much for providing that solution. I added a troubleshooting section in the docs do refer to your comment as a workaround.

@kettanaito I guess there's no better solution than that? In Storybook there are definitely requests which we could potentially filter out by default e.g. hot-update.json but also any request coming from vendors in node_modules, etc to detract the noise and improve performance. However if that's a MSW limitation then there's nothing we can do, right?

I also saw this very interesting comment about using request.passthrough on specific requests. Would that help in this situation?

@kettanaito
Copy link
Member

kettanaito commented Apr 27, 2023

@yannbf, using req.passthrough() in a pre-defined set of handlers shipped by the add-on is the way to go! So, if we're expecting certain HMR requests from Storybook, we should create handlers for them and instruct MSW to pass through them.

rest.get('/hot-update/*', (req) => req.passthrough())

We can utilize RegExp and other ways to build up these request paths.

Once we have this set of handlers, we need to initialize MSW with them, allowing the end-user to add their own handlers on top.

I'm open to discussion on this if you think this API is unsuitable. But, generally, if you want to affect the network, you do that only via request handlers.

@AdrianDiazG
Copy link

Unfortunately, the solutions presented here didn't work for me, but I solved it by disabling updateViaCache:

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working needs reproduction
Projects
None yet
Development

No branches or pull requests

6 participants