MSW tab not populating

[kpervin]

Currently I have handlers set up, and they are returning data for the outputted components, but for some reason the MSW tab shows "No mock data". Please let me know what you need provided to debug.

[offbeat-dev]

Hi @kpervin could you share some of the handlers you are using? msw, storybook and addon versions will also help

storybook-msw-addon has been updated to work with storybook 8 and MSW 2.3.3 ( using http instead of rest to define handlers)

[kpervin]

@offbeat-dev All Storybook packages are updated to v8, and msw is ^2.2.7. The handlers are pretty simple:

const parameters = {
  msw: {
      handlers: [
        http.post("/api/auth", () => HttpResponse.json(mockedSession)),
        http.get("/api/auth/session", () => HttpResponse.json(mockedSession)),
      ],
    },
}

[offbeat-dev]

hi @kpervin can you try with the latest version 2.0.5 and msw 2.2.8 + npx msw init It could have been an issue with the package build. Let me know if that helps.

thank you

[kpervin]

@offbeat-dev Tried it with the versions specified, but no luck.

Here's a screenshot of the output logs:

[offbeat-dev]

Hi @kpervin do you trigger any request on page load? Or are requests triggered by other actions?

[kpervin]

All requests are triggered on page load, yes. No interaction on the page is occurring apart from clicking on the MSW tab.

[kpervin]

Interestingly, also navigating between pages doesn't allow for those pages to load MSW data. Only the initially loaded page will work until you refresh the browser (unsure if related). This seemed to have worked back when I used msw-storybook-addon and msw 1.1.0, so I'm unsure if it's your package or msw 2.0.

EDIT: @offbeat-dev after trying msw-storybook-addon@2.0.0-beta.1 with msw@2.2.8, I did not get the page navigation issue.

[offbeat-dev]

Got it @kpervin. Thank you for the details. Are you using something similar to the React Router + React Query example from the original addon https://msw-sb.vercel.app/?path=/story/demos-react-router-rq--mocked-app?

If that is the case I still have to work on implementing that example for this package. I remembered it being challenging to implement even with MSW 1.0 but I'll give it another try with MSW 2.0 since it made things a little bit easier to synch handler with the addon panel.

[kpervin]

I am not. I am using Apollo Client, NextJS, but not loading any of the SSR methods.

[offbeat-dev]

Ok. I'll try to replicate it. Or if you can share a sandbox reproducing the story and setup you are using would be great so I can debug. Let me know.

[kpervin]

I can attempt to replicate. Might be a while before I can get to it, however.

[dorsharonfuse]

Hi, having the exact same issue, as well as the page reload thing in MSW 2.2.10 and v2.1.1 of the addon. Any progress on this?

[offbeat-dev]

hi @dorsharonfuse are you using NextJs as well?

[dorsharonfuse]

@offbeat-dev Nope, using vite v4 and @storybook/react-vite v8.0.5 (all other storybook deps are also v8.0.5)

[offbeat-dev]

@dorsharonfuse can you check this sandbox please:

link

I used vite 4, storybook v8.0.5, msw 2.1.0 and storybook-msw-addon v2.1.1 and it seems to be working.

let me know. ty

[kpervin]

@offbeat-dev I think that sandbox is private, as I cannot gain access.

[offbeat-dev]

Hi @kpervin can you try now please? I edited the link.

[dorsharonfuse]

@offbeat-dev Thanks for the sandbox. thanks to it, I was able to realize that I was missing the storybook-msw-addon in the addons array in main.ts. Probably my bad, but the docs of this addon never mentioned it.

[dorsharonfuse]

@offbeat-dev I am having another issue though now, some of the listeners aren't getting properly registered, causing some requests to miss the interceptor, and this warning appears in the console: Emitter.ts:173 MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 response:mocked listeners added. Use emitter.setMaxListeners() to increase limit

also, the following error: withRoundTrip.ts:1 Uncaught (in promise) SyntaxError: Unexpected end of input (at withRoundTrip.ts:1:1)

[dorsharonfuse]

Sorry, seems the listeners warning happened even before, its the withRoundTrip error that seems to mess up the listeners. Removing the addon from the addons array fixes the interceptors for some reason

[offbeat-dev]

hi @dorsharonfuse sorry about the miss in the documentation. I'll add it for the next version.

Regarding the Listeners issue, is there any chance you can share a sandbox reproducing the issue so I can take a look? otherwise an example of your stories could also help to debug. ty!

[vinny1575]

I was having this same issue, it seems to be loading now.

Not sure what I did to get the panel to load, but now it seems the edits aren't updating the component. The component reloads when I make an edit (in panel), but the component still uses the old data.

[offbeat-dev]

hi @vinny1575 can you share the versions of addon, storybook and MSW you are using. Which framework are you using? React? A reproduction link/sandbox would be helpful too.

Thank you

[dorsharonfuse]

@offbeat-dev This is the error I'm currently getting. I can't provide a repro, as my setup is pretty complex. I'm using Vite v4 and the latest Storybook 8.0.8, MSW 2.2.13 and the addon v2.1.4.

Because of this error, the request handlers aren't registering properly, and my requests are not being intercepted.