[SOLVED] MSW - Error: No known conditions for "./browser" specifier in "msw" package

After doing successful MSW (Mock Service worker) setup for browser. Everything is working fine.

Here is my setup files ->

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

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

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

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

// 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>,
  );
});

Packages being used ->

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

At this point, Mocking is working fine in the browser. But when I run

vitest run --coverage

I am getting 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;' }