Can't get addon to work. Using react-query v4 and nextjs

[Mexflubber]

Following the instructions none of my stories in storybook load, they all show a spinning circle.

I'm using nextjs and I'm using the "@storybook/nextjs" framework.

[conradogarciaberrotaran]

I'm having issues too. made it work with this workaround: #119 (comment)
But I can't define handlers for each Story.
Did you have any luck?

[conradogarciaberrotaran]

Got it working, instead of using mswLoader, I'm now using mswDecorator. Not sure why.

[yannbf]

Hey @conradogarciaberrotaran and @Mexflubber thanks for reporting this.
The mswLoader is the recommended way to use the addon because it avoids possible flakiness, as the decorator only runs as the story is rendering, while the loader runs before the story renders. But the mswLoader waits for the msw promise to resolve, and it seems like it never resolves for you. Could you please share a reproduction? That will make it much easier for me to understand what's going on and to provide a fix for it.

[conradogarciaberrotaran]

Thank you @yannbf , I've just tried to replicate the issue, basically I ran:

npx create-next-app@latest msw-storybook-issue --use-npm
npx storybook@latest init
npm i msw msw-storybook-addon -D
npx msw init public/

Added the public route of my nextjs to the staticDirs in main.js and added this story:

import { rest } from 'msw';
import { useEffect, useState } from 'react';

const SomeComponent = () => {
  const [response, setResponse] = useState(null);
  useEffect(() => {
    fetch("/api/some-endpoint")
      .then((response) => response.json())
      .then((data) => setResponse(data));
  }, []);

  return <div>{response?.firstName}</div>;
};


export default {
  title: 'Example/SomeComponent',
  component: SomeComponent,
};

export const Something = {
  parameters: {
    msw: {
      handlers: [
        rest.get('/api/some-endpoint', (req, res, ctx) => {
          return res(
            ctx.json({
              firstName: 'Neil',
              lastName: 'Maverick',
            })
          )
        }),
      ]
    },
  }
};

export const SomethingElse = {
  parameters: {
    msw: {
      handlers: [
        rest.get('/api/some-endpoint', (req, res, ctx) => {
          return res(
            ctx.json({
              firstName: 'bob',
              lastName: 'Maverick',
            })
          )
        }),
      ]
    },
  }
};

And it's working correctly.
I'm not able to reproduce it. I will try updating the versions on my project to see if the issue is fixed.

[conradogarciaberrotaran]

Updating the libraries fixed my issue, I updated msw, storybook and msw-storybook-addon to latest

[yannbf]

That's great! Thank you for reporting back. I will be closing this issue, let me know if this happens again.

[conradogarciaberrotaran]

Thank you!