vitest/browser fails to run when the dependent package has storybook

[odanado]

Describe the bug

If a project has Storybook as a dependency, tests that used to succeed will now fail.

Test case:

import { test, expect } from "vitest";

test("sample", () => {
  expect(1 + 1).toBe(2);
});

Error message:

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Unhandled Errors ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

Vitest caught 1 unhandled error during the test run.
This might cause false positive tests. Resolve unhandled errors to make sure your tests are not affected.

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Reload Error ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
Error: Vitest failed to load "vitest/utils" after 10 retries.
 ❯ WebSocket.<anonymous> ../../../../../../__vitest_browser__/index-30Y0Db8-.js:977:36

Caused by: ReferenceError: exports is not defined
 ❯ ../../../../../../node_modules/util/util.js:33:1

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 Test Files  no tests
      Tests  no tests
     Errors  1 error
   Start at  01:03:19
   Duration  3.56s (transform 0ms, setup 0ms, collect 0ms, tests 0ms, environment 0ms, prepare 0ms)


 FAIL  Tests failed. Watching for file changes...
       press h to show help, press q to quit
Cancelling test run. Press CTRL+c again to exit forcefully.

Reproduction

https://github.com/odan-sandbox/vitest-browser-issue-with-storybook

System Info

System:
    OS: macOS 14.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 102.89 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.12.1 - ~/.local/share/asdf/installs/nodejs/18.12.1/bin/node
    Yarn: 1.22.19 - ~/.local/share/asdf/installs/nodejs/18.12.1/bin/yarn
    npm: 8.19.2 - ~/.local/share/asdf/plugins/nodejs/shims/npm
    pnpm: 8.10.5 - ~/.local/share/asdf/installs/nodejs/18.12.1/bin/pnpm
  Browsers:
    Chrome: 120.0.6099.234
    Safari: 17.1
  npmPackages:
    @vitest/browser: 1.2.1 => 1.2.1 
    vitest: 1.2.1 => 1.2.1

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[hi-ogawa]

Thanks for raising an issue.

It looks like there is something wrong when util (node util polyfill https://github.com/browserify/node-util) is installed. I can reproduce the same error by adding only util without storybook hi-ogawa/repro-vitest-browser-basic#2

I'm suspecting that the issue is related to loupe (used by Vitest for formatting internally) has require("util") and Vite's resolution and deps optimization are confused by locally install util https://github.com/chaijs/loupe/blob/9b8a6deabcd50adc056a64fb705896194710c5c6/src/index.ts#L34
(I thought there might be a quick workaround by tweaking optimizeDeps.include but couldn't find anything yet)

Speaking of node polyfill, there is also an issue with url

• Cannot import the url package in browser mode #4535

[brunobispo]

I'm glad to see that the issue has already been reported. As a temporary solution, I'm currently removing it from the bundle using a custom plugin. I would appreciate knowing if there are any better solutions available.

export default defineConfig({
  plugins: [
    // ...
    {
      name: "exclude-util-package",
      transform(_src: string, id: string) {
        if (/node_modules\/util/.test(id)) return { code: "", map: null };
      },
    },
  ],
  // ...
  test: {
    globals: true,
    browser: {
      enabled: true,
      name: "chrome",
      headless: true,
    },
  },
});