vitest/browser fails to run when the dependent package has chai v5

[odanado]

Describe the bug

If a project has chai v5 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.

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Preload Error ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
Error: Vitest failed to load its runner after 30 seconds.
 ❯ tryCall ../../../../../../__vitest_browser__/tester-uNa8VWMH.js:313:36
 ❯ Object.runTests ../../../../../../__vitest_browser__/tester-uNa8VWMH.js:404:20

Caused by: SyntaxError: The requested module '/node_modules/@vitest/expect/node_modules/chai/index.js?v=eec8ee4f' does not provide an export named 'default'
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 Test Files  no tests
      Tests  no tests
     Errors  1 error
   Start at  23:07:45
   Duration  33.66s (transform 0ms, setup 0ms, collect 0ms, tests 0ms, environment 0ms, prepare 0ms)

Reproduction

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

System Info

System:
    OS: macOS 14.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 121.56 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: 122.0.6261.94
    Safari: 17.1
  npmPackages:
    @vitest/browser: 1.3.1 => 1.3.1 
    vitest: 1.3.1 => 1.3.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.

[sheremet-va]

Chai 5 is not supported at the moment.

[edoardocavazza]

I have the same issue after upgrading to v1.3.1 from v1.2.1, regardless the presence of chai 5.

[hi-ogawa]

I think this is yet another case of missing optimizeDeps of Vitest cjs dependencies though I'm not really sure why this manifests on when there are multiple chai versions.
(EDIT: I think this is because when a project has its own chai dependency, there will be two node_modules/chai and node_modules/@vitest/expect/node_modules/chai.)

In your reproduction, adding this should should help for the time being.

import { defineConfig } from "vitest/config";

export default defineConfig({
  optimizeDeps: {
    include: ["vitest > @vitest/expect > chai"]
  },
  test: { ... }
});

---

As mentioned in #5332 (comment), currently Vitest uses chai v4, so same chai instance won't be shared when using it like below. But I suppose the issue is not expecting such use case, so probably we can fix optimizeDeps.include.

import * as chai from "chai"; // project uses chai v5 
import { expect } from "vitest"; // internally uses a different copy of chai v4

[hi-ogawa]

Hmm, maybe this might be tricky since loupe is in optimizeDeps.exclude #5082 and this is happening when I add vitest > @vitest/expect > chai in optimizeDeps.include and run test/browser:

[vite] Internal server error: Failed to resolve import "loupe" from "node_modules/.vite/deps/chunk-R6V3PAXC.js?v=d4c039b0". Does the file exist?
  Plugin: vite:import-analysis
  File: /home/hiroshi/code/others/vitest/test/browser/node_modules/.vite/deps/chunk-R6V3PAXC.js?v=d4c039b0:3:48
  1  |  const __vi_inject__ = { [Symbol.toStringTag]: "Module" };
  2  |  import { __vi_inject__ as __vi_esm_0__ } from './chunk-5YJXGM4D.js'
  3  |  import { __vi_inject__ as __vi_esm_1__ } from 'loupe'

Maybe original reproduction works only because of flat node modules, so loupe is always visible from node_modules/.vite/deps. If it were on pnpm, probably it'll still break.

[sheremet-va]

This should be fixed with Vitest 2