Need Help: MSW Handler Blocking a specific GET Request in Storybook

[Mikex95]

I am facing an issue with the MSW handler in my Storybook setup. The GET requests for the story SocialBar.stories.tsx are being blocked, and I am receiving the error message "Failed to fetch dynamically imported module." I have attached a screenshot showing the blocked request, it is really flaky, that means, sometimes the component will render properly. All other stories are working fine!

import type { Meta, StoryObj } from '@storybook/react';
import facebookIcon from '/clients/default/images/Footer/facebook-icon.svg';
import twitterIcon from '/clients/default/images/Footer/twitter-icon.svg';
import linkedinIcon from '/clients/default/images/Footer/linkedin-icon.svg';
import instagramIcon from '/clients/default/images/Footer/instagram-icon.svg';
import youtubeIcon from '/clients/default/images/Footer/youtube-icon.svg';
import SocialBar from './SocialBar';

const meta: Meta<typeof SocialBar> = {
  title: 'Components/SocialBar/SocialBar',
  component: SocialBar,
  argTypes: {},
  args: {}
};

export default meta;

type Story = StoryObj<typeof SocialBar>;

export const Default: Story = {
  render: () => (
    <SocialBar
      socials={[
        { icon: facebookIcon, link: { href: 'https://www.facebook.com' } },
        { icon: twitterIcon, link: { href: 'https://twitter.com' } },
        { icon: linkedinIcon, link: { href: 'https://www.linkedin.com' } },
        { icon: instagramIcon, link: { href: 'https://www.instagram.com' } },
        { icon: youtubeIcon, link: { href: 'https://www.youtube.com' } }
      ]}
    />
  )
};

preview.tsx:

import type { Preview } from '@storybook/react';
import 'primeflex/primeflex.scss';
import 'primereact/resources/primereact.min.css';
import '../src/renderer/currentTheme';
import { initialize, mswLoader } from 'msw-storybook-addon';

import { initLocal, i18n } from '../src/i18n';

let url: string | undefined = './mockServiceWorker.js';

import { Decorator } from './Decorator';
import { handlers } from '../src/api/mocks/setup/handlers';

initLocal();
initialize({
  onUnhandledRequest: 'bypass',
  serviceWorker: {
    url
  }
});

const preview: Preview = {
  parameters: {
    i18n,
    msw: {
      handlers
    }
  },
  loaders: [mswLoader],
  tags: ['autodocs']
};

export const decorators = [Decorator];

Expected Behavior:
The SocialBar story should render without any issues, and the GET requests should not be blocked.

Actual Behavior:
The GET request for SocialBar.stories.tsx is sometimes blocked, as shown in the attached screenshot.

Additional Information:

The error occurs when using the MSW handler with Storybook.
The status of the blocked request is (blocked:other).
The request initiator is mockServiceWorker.js:19.
Questions:

Is there a configuration step I am missing to properly integrate MSW with Storybook?
How can I debug or trace why the GET request is being blocked?
Are there any known issues or workarounds for this problem?
Thank you for your assistance!

versions: 
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "msw": "^2.3.1",
    "msw-storybook-addon": "^2.0.2",
    "storybook": "^8.1.5",
    "storybook-addon-mock-date": "^0.6.0",
    "storybook-react-i18next": "^3.1.1",
    "typescript": "^5.4.5",
    "vite": "^5.2.12",
    "vitest": "^1.6.0"

Screenshots of the issue:

[kettanaito]

Hi, @Mikex95.

Sorry, I have no idea what's going wrong here. Let's start by updating any related dependencies, like msw, the add-on, and Storybook itself. Once you do, let me know if the issue is still there.