Error: No known conditions for "./browser" specifier in "msw" package

[Ankur-Marwaha]

Prerequisites

• I confirm my issue is not in the opened issues
• I confirm the Frequently Asked Questions didn't contain the answer to my issue

Environment check

• I'm using the latest msw version
• I'm using Node.js version 18 or higher

Browsers

Chromium (Chrome, Brave, etc.)

Reproduction repository

NA

Reproduction steps

Here are the setup files in my project

//package.json
"devDependencies": {
  "@vitest/coverage-istanbul": "1.2.2",    
  "vitest": "1.3.0"
}

// main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { LicenseInfo } from '@mui/x-license-pro';
import { CssBaseline } from '@mui/material';
import App from './App';
import AppProviders from './providers/AppProviders';

LicenseInfo.setLicenseKey(import.meta.env.VITE_PUBLIC_MUI_LICENSE_KEY);

async function enableMocking() {
  if (import.meta.env.DEV) {
    const worker = await import('./mocks/browser');
    return worker.default.start({ onUnhandledRequest: 'bypass' });
  }
  return Promise.resolve();
}

enableMocking().then(() => {
  ReactDOM.createRoot(document.getElementById('root')!).render(
    <React.StrictMode>
      <AppProviders>
        <CssBaseline />
        <App />
      </AppProviders>
    </React.StrictMode>,
  );
});

//browser.ts
import { setupWorker } from 'msw/browser';
import handlers from './handlers';

const worker = setupWorker(...handlers);
export default worker;

//handlers.ts
import { http, HttpResponse } from 'msw';

const handlers = [
  http.post('url_being_mocked', async ({ request }) => {
    ...
  }),
];
export default handlers;

Current behavior

For dev-server or build, everything works fine. I am able to mock properly.

When i run
vitest run --coverage

It fails with the following error

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Unhandled Error ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
Error: No known conditions for "./browser" specifier in "msw" package
 ❯ e node_modules/vite/dist/node/chunks/dep-jDlpJiMN.js:47384:25
 ❯ n node_modules/vite/dist/node/chunks/dep-jDlpJiMN.js:47384:646
 ❯ o node_modules/vite/dist/node/chunks/dep-jDlpJiMN.js:47384:1297
 ❯ resolveExportsOrImports node_modules/vite/dist/node/chunks/dep-jDlpJiMN.js:48061:20
 ❯ resolveDeepImport node_modules/vite/dist/node/chunks/dep-jDlpJiMN.js:48080:31
 ❯ tryNodeResolve node_modules/vite/dist/node/chunks/dep-jDlpJiMN.js:47805:20
 ❯ Context.resolveId node_modules/vite/dist/node/chunks/dep-jDlpJiMN.js:47568:28
 ❯ Object.resolveId node_modules/vite/dist/node/chunks/dep-jDlpJiMN.js:50762:64
 ❯ process.processTicksAndRejections node:internal/process/task_queues:95:5
 ❯ TransformContext.resolve node_modules/vite/dist/node/chunks/dep-jDlpJiMN.js:50453:23
 ❯ normalizeUrl node_modules/vite/dist/node/chunks/dep-jDlpJiMN.js:65586:34
 ❯ async file:/Users/ankurmarwaha/IdeaProjects/order-entry-ui/node_modules/vite/dist/node/chunks/dep-jDlpJiMN.js:65749:47
 ❯ TransformContext.transform node_modules/vite/dist/node/chunks/dep-jDlpJiMN.js:65670:13
 ❯ Object.transform node_modules/vite/dist/node/chunks/dep-jDlpJiMN.js:50838:30
 ❯ loadAndTransform node_modules/vite/dist/node/chunks/dep-jDlpJiMN.js:53611:29
 ❯ ViteNodeServer._transformRequest node_modules/vite-node/dist/server.mjs:413:16
 ❯ IstanbulCoverageProvider.getCoverageMapForUncoveredFiles node_modules/@vitest/coverage-istanbul/dist/provider.js:281:7
 ❯ IstanbulCoverageProvider.reportCoverage node_modules/@vitest/coverage-istanbul/dist/provider.js:228:33
 ❯ Vitest.reportCoverage node_modules/vitest/dist/vendor/cli-api.RIYLcWhB.js:6537:7
 ❯ async file:/Users/ankurmarwaha/IdeaProjects/order-entry-ui/node_modules/vitest/dist/vendor/cli-api.RIYLcWhB.js:6328:7
 ❯ Vitest.runFiles node_modules/vitest/dist/vendor/cli-api.RIYLcWhB.js:6332:12
 ❯ Vitest.start node_modules/vitest/dist/vendor/cli-api.RIYLcWhB.js:6223:7
 ❯ startVitest node_modules/vitest/dist/vendor/cli-api.RIYLcWhB.js:13380:5
 ❯ start node_modules/vitest/dist/cli.js:1386:17
 ❯ CAC.run node_modules/vitest/dist/cli.js:1367:3

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
Serialized Error: { plugin: 'vite:import-analysis', id: '/Users/ankurmarwaha/IdeaProjects/order-entry-ui/src/mocks/browser.ts', pluginCode: 'function cov_1w46yme1q9() {\n  var path = "/Users/ankurmarwaha/IdeaProjects/order-entry-ui/src/mocks/browser.ts";\n  var hash = "5c0d2e9c5d02c56205857e5a14c090467c6fff95";\n  var global = globalThis;\n  var gcv = "__VITEST_COVERAGE__";\n  var coverageData = {\n    path: "/Users/ankurmarwaha/IdeaProjects/order-entry-ui/src/mocks/browser.ts",\n    statementMap: {\n      "0": {\n        start: {\n          line: 3,\n          column: 15\n        },\n        end: {\n          line: 3,\n          column: 39\n        }\n      }\n    },\n    fnMap: {},\n    branchMap: {},\n    s: {\n      "0": 0\n    },\n    f: {},\n    b: {},\n    inputSourceMap: {\n      version: 3,\n      sources: ["/Users/ankurmarwaha/IdeaProjects/order-entry-ui/src/mocks/browser.ts"],\n      sourcesContent: ["import { setupWorker } from \'msw/browser\';\nimport handlers from \'./handlers\';\n\nconst worker = setupWorker(...handlers);\nexport default worker;\n"],\n      mappings: "AAAA,SAAS,mBAAmB;AAC5B,OAAO,cAAc;AAErB,MAAM,SAAS,YAAY,GAAG,QAAQ;AACtC,eAAe;",\n      names: []\n    },\n    _coverageSchema: "1a1c01bbd47fc00a2c39e90264f33305004495a9",\n    hash: "5c0d2e9c5d02c56205857e5a14c090467c6fff95"\n  };\n  var coverage = global[gcv] || (global[gcv] = {});\n  if (!coverage[path] || coverage[path].hash !== hash) {\n    coverage[path] = coverageData;\n  }\n  var actualCoverage = coverage[path];\n  {\n    // @ts-ignore\n    cov_1w46yme1q9 = function () {\n      return actualCoverage;\n    };\n  }\n  return actualCoverage;\n}\ncov_1w46yme1q9();\nimport { setupWorker } from "msw/browser";\nimport handlers from "./handlers";\nconst worker = (cov_1w46yme1q9().s[0]++, setupWorker(...handlers));\nexport default worker;' }

Expected behavior

No error is expected.

[Ankur-Marwaha]

After a lot of banging my head on the wall. I found a silly solution/mistake for myself.

Hope it helps someone out there.

export default defineConfig({
  test: {
    ...
    coverage: {
      ...
      exclude: [
        ...,
        '**/browser.ts',      // Added these to be excluded from coverage
        '**/handler.ts',
      ],
      thresholds: {
        ...
      },
    },
  },
});

[justintoman]

@Ankur-Marwaha Thank you so much for posting your solution! I had the exact same thing going on and it was driving me nuts!

[ulidtko]

@Ankur-Marwaha that's not a (good) solution.

I'm also getting this error without --coverage, from simply npx vitest.

[Ankur-Marwaha]

@ulidtko , I agree

But i feel there is no point in testing this as well.

[ulidtko]

OK so in my case, the mistake was that this project was using setupWorker from 'msw/browser' — in a node server test.

The fix was to rewrite the mock fixture to import { setupServer } from 'msw/node', etc.

[chriskang0917]

@ulidtko Thank you so much! Your solution and advice help me a lot!

[essana3]

None of the above solutions worked for me