Controls panel Broken (potentially service worker interferes with cache)

[Samuel-Morgan-Tyghe]

"storybook-msw-addon": "^2.1.5", "storybook": "^8.2.5",

I am adding my handlers globally and something about adding an empty ( or full ) handler array causes it to interfere with control addon panel, forcing me to either choose one or the other when they should work together.

parameters: {
  msw: {
    handlers: [],
    delay: 500, // Delay MSW interception by 500ms
  },
},

scrnli_7_22_2024_12-15-46 PM.webm

delay highlights that the state is updated, but msw addon triggers a rerender with cache of previous state

[Samuel-Morgan-Tyghe]

import "@assets/css/App.css";
import "@assets/css/index.css";
import { Preview } from "@storybook/react";
import "inter-ui/inter.css";
import "../src/i18n";
import "../src/init";
import { routerDecorator } from "./auth";
import { globalArgTypes } from "./globalArgs";
import { initialize, mswLoader } from "storybook-msw-addon";

(global as typeof globalThis & { Intercom: any }).Intercom = () => {};

import { handlers } from "@mocks/handlers";
import instance from "@shared/services/api";
import { swaggerAxiosInstance } from "@shared/services/api/swaggerAxiosClient";
import {
  vegaUserCompanyHandler,
  vegaUserProfileHandler,
} from "./controlHandlers";

// Initialize MSW
initialize({
  onUnhandledRequest: "bypass",
  serviceWorker: { url: 'apimockserviceworker.js',  options: {
    updateViaCache: 'all'
  } },
});

if (typeof global.process === "undefined") {
  instance.defaults.baseURL = import.meta.env.BASE_URL;
  swaggerAxiosInstance.defaults.baseURL = import.meta.env.BASE_URL;
}

const preview: Preview = {
  loaders: [mswLoader],
  // decorators: [routerDecorator],
  globalTypes: globalArgTypes,
  parameters: {
    msw: {
      handlers: [],
      onUnhandledRequest: "bypass",
    },
  },
};

export default preview;

[Samuel-Morgan-Tyghe]

// import autoStoryGenerator from "@takuma-ru/auto-story-generator";
import { InlineConfig } from "vite";
export default {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],

  addons: [
    "storybook-msw-addon",
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@chromatic-com/storybook",
  ],

  async viteFinal(config: InlineConfig) {
    const { mergeConfig } = await import("vite");

    return mergeConfig(config, {
      define: {
        STORYBOOK_ENV: JSON.stringify(true),
      },
      plugins: [
        // autoStoryGenerator.vite({
        //   preset: "react",
        //   imports: [
        //     // "src/components/**/*.tsx",
        //     "src/advisor/**/*.tsx",
        //     // "src/scenes/**/*.tsx"
        //   ],
        //   ignores: ["*.test.tsx", "*.test.ts"],
        // }),
      ],
    });
  },

  framework: {
    name: "@storybook/react-vite",
    options: {},
  },

  typescript: {
    reactDocgen: "react-docgen-typescript",
    check: true,
  },
  staticDirs: ["../public"],
  docs: {},
};