Can't update inline snapshot in Browser Mode

[BenoitZugmeyer]

Describe the bug

I am reopening an issue for the previously closed issue #2327.

When using vitest in Browser Mode, an error occurs when updating inline snapshots.

I believe this is because:

• in Browser Mode, vite:resolve is using the browser entry point to resolve dependencies
• magic-string (this file) is loaded as a module
• it imports @jridgewell/sourcemap-codec, which has an UMD bundle as browser entry point (see its package.json)

Importing an UMD bundle from an ES module doesn't work, hence the error.

Reproduction

git clone https://gist.github.com/BenoitZugmeyer/a93d80dbbbadc9e4173a55d82874a875 repro
cd repro
npm ci
npm test -- -u --run

Output:

> test
> vitest -u --run


 RUN  v1.3.1 /home/alk/tmp/repro-vitest-error/repro
      Browser runner started at http://localhost:5173/


⎯⎯⎯⎯⎯⎯ 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.

⎯⎯⎯⎯ Unhandled Rejection ⎯⎯⎯⎯⎯
SyntaxError: The requested module '/node_modules/@jridgewell/sourcemap-codec/dist/sourcemap-codec.umd.js?v=15cdcfd9' does not provide an export named 'encode'
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 Test Files   (1)
      Tests   (1)
     Errors  1 error
   Start at  23:53:31
   Duration  2.22s (transform 0ms, setup 0ms, collect 7ms, tests 0ms, environment 0ms, prepare 0ms)

System Info

System:
    OS: Linux 6.7 Arch Linux
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
    Memory: 21.55 GB / 31.14 GB
    Container: Yes
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 21.6.2 - /usr/bin/node
    npm: 10.4.0 - /usr/bin/npm
  Browsers:
    Chromium: 122.0.6261.39
  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.

[hi-ogawa]

Thanks for the concise reproduction and investigation! I put up a PR to fix this, but I think you can also do the same from your configuration as a temporary workaround:

import { defineConfig } from "vitest/config"

export default defineConfig({
  optimizeDeps: {
    include: ["vitest > @vitest/snapshot > magic-string"],
  },
  test: {
    browser: {
      enabled: true,
      name: "chrome",
    },
  },
});