Getting "Could not resolve msw" when using with vite

[dlvhdr]

Description

I tried using this library but couldn't make it work.

• I'm using msw for quite some time
• I tried to integrate source with our browser handlers
• Getting this error: Could not resolve "msw"

Reproduction steps

1. Use vite with a few react plugins, including @modyfi/vite-plugin-yaml to load open api specs in YAML:

    react(),
    viteTsconfigPaths(),
    nodePolyfills({
      // Whether to polyfill `node:` protocol imports.
      protocolImports: true,
      globals: {
        Buffer: true,
        global: true,
        process: true,
      },
    }),
    svgrPlugin({
      svgrOptions: { dimensions: true },
    }),
	viteYaml(),

2. Declare a browser handler:

import { fromOpenApi } from "@mswjs/source/open-api";

import spec from "./swagger.yaml";

export const testHandlers = await fromOpenApi(JSON.stringify(spec));

3. Define the worker:

import { SetupWorker, setupWorker } from "msw/browser";

import { browserHandlers } from "./browserHandlers";
import { testHandlers } from "./responseMocks/healthHandlers";

let wrk: SetupWorker = {} as SetupWorker;
wrk = setupWorker(...browserHandlers, ...testHandlers);

4. Run vite
5. Get error

yarn run v1.22.22
$ VITE_ENABLE_MSW_MOCKS=true yarn start:bundler
$ ./scripts/verify_host_file.sh && vite
Re-optimizing dependencies because lockfile has changed

  VITE v5.4.8  ready in 612 ms

  ➜  Network: https://local.app.komodor.local:3000/
  ➜  press h + enter to show help
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating
✘ [ERROR] Could not resolve "msw"

    ../../node_modules/@mswjs/source/lib/open-api/from-open-api.js:1:34:
      1 │ import { HttpHandler, http } from 'msw';
        ╵                                   ~~~~~

  You can mark the path "msw" as external to exclude it from the bundle, which will remove this
  error and leave the unresolved path in the bundle.

/Users/dlvhdr/code/komodor/mono/node_modules/esbuild/lib/main.js:1472
  let error = new Error(text);
              ^

Error: Build failed with 1 error:
../../node_modules/@mswjs/source/lib/open-api/from-open-api.js:1:34: ERROR: Could not resolve "msw"
    at failureErrorWithLog (/Users/dlvhdr/code/komodor/mono/node_modules/esbuild/lib/main.js:1472:15)
    at /Users/dlvhdr/code/komodor/mono/node_modules/esbuild/lib/main.js:945:25
    at /Users/dlvhdr/code/komodor/mono/node_modules/esbuild/lib/main.js:1353:9
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  errors: [Getter/Setter],
  warnings: [Getter/Setter]
}

Node.js v18.18.2
error Command failed with exit code 1.

Expected behavior

Initial assessment

• I'm not sure if the top-level await has anything to do with it

Screenshots

[kettanaito]

Hi. Do you have msw installed? What does npm ls msw print?

[dlvhdr]

Yes, I have it installed.
I'm using yarn v1:

$ yarn why msw
yarn why v1.22.22
[1/4] 🤔  Why do we have the module "msw"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "[email protected]"
info Reasons this module exists
   - "_project_#web" depends on it
   - Hoisted from "_project_#web#msw"
✨  Done in 1.01s.

But npm also finds it:

$ npm ls msw
mono@ /Users/dlvhdr/code/komodor/mono
└─┬ [email protected] -> ./services/web
  └── [email protected]