How to add MSW to Histoire-Vue

[Ericlm]

Hello ! I'm trying to integrate MSW into Histoire (in a Vite/Vue) to mock requests, but I can't find a good way of doing it; I always end up with warnings like:

// With setupWorker
Error while collecting story /Users/ericlemaitre/anav/frontend/src/components/Histoire.story.vue:
Invariant Violation: [MSW] Failed to execute `setupWorker` in a non-browser environment. Consider using `setupServer` for Node.js environment instead.
    at setupWorker (file:///Users/ericlemaitre/anav/frontend/node_modules/msw/lib/browser/index.mjs:2882:10)
    at /Users/ericlemaitre/anav/frontend/src/histoire.setup.ts:17:16
    at async S (/Users/ericlemaitre/anav/frontend/node_modules/@histoire/plugin-vue/dist/bundled/client/server/run.js:43:5)
    at async run (/Users/ericlemaitre/anav/frontend/node_modules/histoire/dist/node/collect/run.js:7:20)
    at async default (file:///Users/ericlemaitre/anav/frontend/node_modules/histoire/dist/node/collect/worker.js:44:5)
    at async file:///Users/ericlemaitre/anav/frontend/node_modules/@akryum/tinypool/dist/esm/worker.js:111:20

when running in the shell, but crashing when the story is in the browser:

✘ [ERROR] No known conditions for "./ClientRequest" specifier in "@mswjs/interceptors" package [plugin vite:dep-pre-bundle]

    node_modules/msw/lib/node/index.mjs:3:41:
      3 │ ... } from "@mswjs/interceptors/ClientRequest";
        ╵            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  This error came from the "onResolve" callback
  registered here:

    node_modules/vite/node_modules/esbuild/lib/main.js:1141:20:
      1141 │       let promise = setup({
           ╵                     ^

    at setup (file:///Users/ericlemaitre/anav/frontend/node_modules/vite/dist/node/chunks/config.js:31237:12)
    at handlePlugins (/Users/ericlemaitre/anav/frontend/node_modules/vite/node_modules/esbuild/lib/main.js:1141:21)
    at buildOrContextImpl (/Users/ericlemaitre/anav/frontend/node_modules/vite/node_modules/esbuild/lib/main.js:854:5)
    at Object.buildOrContext (/Users/ericlemaitre/anav/frontend/node_modules/vite/node_modules/esbuild/lib/main.js:680:5)
    at /Users/ericlemaitre/anav/frontend/node_modules/vite/node_modules/esbuild/lib/main.js:2035:68
    at new Promise (<anonymous>)
    at Object.context (/Users/ericlemaitre/anav/frontend/node_modules/vite/node_modules/esbuild/lib/main.js:2035:27)
    at Object.context (/Users/ericlemaitre/anav/frontend/node_modules/vite/node_modules/esbuild/lib/main.js:1877:58)
    at prepareEsbuildOptimizerRun (file:///Users/ericlemaitre/anav/frontend/node_modules/vite/dist/node/chunks/config.js:32097:26)

Do you know a way to avoid those crashes?

See also #591

[Ericlm]

I've tried setupWorker and setupServer, when starting a worker in the histoire.setup.ts file :

import { defineSetupVue3 } from '@histoire/plugin-vue'
import { setupWorker } from 'msw/browser'

import { createPinia } from 'pinia'
import './assets/main.css'

export const worker = setupWorker()

export const setupVue3 = defineSetupVue3(async ({ app }) => {
  const pinia = createPinia()
  app.use(pinia)

  await worker.start()
})