Making browser mode work (ESM)

[Nurou]

I tried setting up Vitest with browser mode enabled (React + TypeScript + Vite SPA)

Vitest throws a syntax error (only when browser-mode is enabled):

SyntaxError: Named export 'WebSocketServer' not found. The requested module 'ws' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'ws';
const { WebSocketServer } = pkg;

 ❯ ModuleJob._instantiate node:internal/modules/esm/module_job:180:21
 ❯ ModuleJob.run node:internal/modules/esm/module_job:263:5
 ❯ onImport.tracePromise.__proto__ node:internal/modules/esm/loader:547:26
 ❯ node_modules/vitest/dist/chunks/resolveConfig.BbcK25zb.js:7739:43
 ❯ node_modules/vitest/dist/chunks/resolveConfig.BbcK25zb.js:7738:27
 ❯ executeTests node_modules/vitest/dist/chunks/resolveConfig.BbcK25zb.js:7725:5
 ❯ node_modules/vitest/dist/chunks/cli-api.BZbq1zTX.js:12865:11
 ❯ Vitest.runFiles node_modules/vitest/dist/chunks/cli-api.BZbq1zTX.js:12892:12
 ❯ Vitest.start node_modules/vitest/dist/chunks/cli-api.BZbq1zTX.js:12773:21

Inspecting the trace, Vitest resolveConfig script seems to fail when making the following call:

const { createBrowserPool } = await import('@vitest/browser');

Any hints as to what may be causing this?

Thanks 🙏

[hi-ogawa]

Probably we expect node to pick up esm version of ws, but somehow it picked up cjs version. I have no clue, so you need to try to find a minimal repro. For starter, it might be helpful to know

• npx envinfo --system --npmPackages '{vitest*,@vitest/*,vite,@vitejs/*,playwright,webdriverio}' --binaries --browsers
• pnpm why ws (or any equivalent on your package manager)
• vite/vitest config
• how you run test (does it have custom node loader? tsx, ts-node, require/import-in-the-middle)