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:
```ts
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.

<!-- List the steps to follow in order to reproduce the issue. -->
<!-- BOUNS: Include a reproduction repository to help resolve the issue faster. -->

## Expected behavior

<!-- Describe what do you expect to happen -->

## Initial assessment

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

## Screenshots

<!-- If applicable, attach screenshots to help explain the issue -->

[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 "msw@2.0.3"
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
└─┬ web@0.1.0 -> ./services/web
  └── msw@2.0.3