Browser mode broken with bundling/transpilation issues under 2.0.0-beta.12

[xeger]

Describe the bug

Preface: thank you for all of your hard work; Browser Mode with the preview provider is the reason I strongly favor vitest for my project. I need the speed of Jest, the runtime inspectability of Cypress or Playwright, and the clean architectural simplicity of vite -- and you are poised to deliver! ❤️

When I write a trivial test for a trivial component and try to run vitest, nothing works. It seems something is going very wrong with module paths on disk and/or contents, as represented in the bundled code which makes it into the browser. Perhaps the test server is being influenced by a bad configuration choice in one of my vite/tsconfig files?

The first telltale happens when I open the runner:

$ npx vitest

 DEV  v2.0.0-beta.12 <basedir>
      Browser runner started at http://localhost:5173/

Sourcemap for "<basedir>/node_modules/@vitest/browser/dist/client/__vitest_browser__/client-Dz5Ebwug.js" points to missing source files
Sourcemap for "<basedir>/node_modules/vitest/dist/runners.js" points to missing source files
Sourcemap for "<basedir>/node_modules/vitest/dist/vendor/setup-common.CWnv_2-5.js" points to missing source files
Sourcemap for "<basedir>/node_modules/@vitest/snapshot/dist/index.js" points to missing source files

My favored browser (Chrome) opens and happily shows the vitest UI, but my test is stuck in "pending" forever:

Opening the browser console reveals more errors:

Uncaught SyntaxError: The requested module '/node_modules/@vitest/runner/node_modules/pretty-format/build/index.js?v=3e2658e0' does not provide an export named 'format' (at chunk-display.js:1:10)

Uncaught TypeError: __vitest_browser_runner__.runTests is not a function
    at <basedir>/src/atoms/__tests__/button.test.tsx:86:27

Reproduction

I've created a public repository with a minimal reproduction.

Just clone, npm install, and npx vitest.

System Info

System:
    OS: macOS 14.5
    CPU: (12) arm64 Apple M3 Pro
    Memory: 1.35 GB / 36.00 GB
    Shell: 3.7.0 - /opt/homebrew/bin/fish
  Binaries:
    Node: 20.11.0 - ~/.asdf/installs/nodejs/20.11.0/bin/node
    Yarn: 1.22.22 - ~/.asdf/installs/nodejs/20.11.0/bin/yarn
    npm: 10.8.1 - ~/.asdf/plugins/nodejs/shims/npm
    pnpm: 9.1.1 - ~/.asdf/installs/nodejs/20.11.0/bin/pnpm
  Browsers:
    Chrome: 126.0.6478.127
    Safari: 17.5
  npmPackages:
    @vitejs/plugin-react: ^4.2.1 => 4.2.1 
    @vitest/browser: ^2.0.0-beta.12 => 2.0.0-beta.12 
    vite: ^5.2.0 => 5.2.7 
    vitest: ^2.0.0-beta.12 => 2.0.0-beta.12

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.

[userquin]

With pnpm works, we need to review the runner...

[userquin]

@xeger try adding @vitest/runner to your dev dependencies, it should fix the error: "@vitest/runner": "^2.0.0-beta.12"

[xeger]

Thank you for the quick response. TL;DR you've given me a serviceable workaround and unblocked development. I believe the details will be relevant to letting you solve the issue.

Manually adding @vitest/runner as a dev dependency: fail.

Reinitializing package-lock.json afterward: success.

Applying this workaround to my actual repository (not the minimal repro): fail.

The difference in my actual repository is that I've also got storybook installed, and @storybook/test (my goal is to port my small, trivial test suite from storybook to vitest browser mode).

Upon install, npm gives me a lot of peer dependency warnings; it seems that Storybook is dragging in @storybook/jest-dom which has a peer dependency on a very old vitest.

It seems that npm's hoisting/resolution of incompatible peer dependencies is yielding a bad tree that breaks vitest, whereas pnpm makes different choices and/or has better isolation which lets vitest run.

Even more confusingly, if I try to break my independent-repro repository by adding @storybook/test, it doesn't break. So there must be something particular about the way NPM has resolved the tree over time, in my real repro.

Long run this problem should disappear for me, as I don't intend to keep using @storybook/test, and I have no problem switching to pnpm to let them coexist in the short run.

I've pushed some commits to the repro repository showing vitest begin working, then break again, as the dependency tree evolves. Hopefully it'll prove useful to you, but this feels like the sort of thing that should go away over time once you release vitest 2.0 and all of your dependent libraries are upgraded to make use of it. That could take awhile however.

You've earned yourself a sponsor today 🖖 .

Some Details

Upon adding vitest:

npm warn ERESOLVE overriding peer dependency
npm warn While resolving: @testing-library/[email protected]
npm warn Found: [email protected]
npm warn node_modules/vitest
npm warn   dev vitest@"^2.0.0-beta.12" from the root project
npm warn   1 more (@vitest/browser)
npm warn
npm warn Could not resolve dependency:
npm warn peerOptional vitest@">= 0.32" from @testing-library/[email protected]
npm warn node_modules/@testing-library/jest-dom
npm warn   @testing-library/jest-dom@"6.4.5" from @storybook/[email protected]
npm warn   node_modules/@storybook/test
npm warn
npm warn Conflicting peer dependency: [email protected]
npm warn node_modules/vitest
npm warn   peerOptional vitest@">= 0.32" from @testing-library/[email protected]
npm warn   node_modules/@testing-library/jest-dom
npm warn     @testing-library/jest-dom@"6.4.5" from @storybook/[email protected]
npm warn     node_modules/@storybook/test

Upon npm ls vitest:

npm ls vitest
@crossnokaye/[email protected] /Users/tony/Code/crossnokaye/ux-common
├─┬ @storybook/[email protected]
│ └─┬ @testing-library/[email protected]
│   └── [email protected] deduped invalid: ">= 0.32" from node_modules/@testing-library/jest-dom
├─┬ @vitest/[email protected]
│ └── [email protected] deduped
└── [email protected]

[userquin]

try adding vitest dependencies also to "resolutions" entry

[xeger]

That works; thank you. (I am still going to just migrate to pnpm; it brings other benefits.)