loupe ... does not provide an export named 'inspect'

[zmullett]

Describe the bug

Experiencing this on an update to 1.1.3:

Error: Vitest failed to load "vitest/utils" after 10 retries.
 ❯ WebSocket.<anonymous> ../../../../../../__vitest_browser__/index-CO7GSZ7y.js:964:36

Caused by: SyntaxError: The requested module '/@fs/path/to/my/package/node_modules/.pnpm/loupe@2.3.7/node_modules/loupe/loupe.js?v=12a7f0f8' does not provide an export named 'inspect'

When I downgrade both vitest and @vitest/browser packages, it still somehow finds 1.1.3 and has the same issue.

I encountered similar issues/4384. I attempted to clear everything:

• New git clone
• Cleared pmpm cache

...however the issue remains. Is there something else I need to clear? Or is this a legitimate bug?

Reproduction

Nothing exceptional in the test config:

test: {
  browser: {
    provider: 'playwright',
    name: 'chromium',
    enabled: true,
    headless: true,
  },
}

System Info

System:
    OS: macOS 14.2.1
    CPU: (8) arm64 Apple M2
    Memory: 388.22 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 21.0.0 - /opt/homebrew/bin/node
    Yarn: 1.22.21 - /opt/homebrew/bin/yarn
    npm: 10.2.5 - ~/Documents/path/to/my/package/node_modules/.bin/npm
    pnpm: 8.14.0 - ~/Library/pnpm/pnpm
    bun: 1.0.3 - ~/.bun/bin/bun
  Browsers:
    Chrome: 120.0.6099.129
    Safari: 17.2.1
  npmPackages:
    @vitejs/plugin-basic-ssl: ^1.0.2 => 1.0.2 
    @vitest/browser: ^1.1.3 => 1.1.3 
    vite: ^5.0.11 => 5.0.11 
    vitest: ^1.1.3 => 1.1.3

Used Package Manager

pnpm

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.

[zmullett]

Also the case for 1.2.0

[sheremet-va]

Cannot reproduce the error in the latest vitest and @vitest/browser: please provide a reproduction using the basic template (https://stackblitz.com/edit/vitest-dev-vitest-1yf6ul?file=README.md&initialPath=__vitest__/)

[zmullett]

Hi @sheremet-va, I wasn't able to reproduce this using the basic template. The problem still persists on my local machine.

If I run with headless mode off, I can inspect the files served (i.e. navigating to localhost:port/__vitest_browser__/index-30Y0Db8-.js or localhost:port/@fs/{project_path}/node_modules/.pnpm/loupe@2.3.7/node_modules/loupe/loupe.js?v=62c7b4b8) and I can see local debugging modifications I make this way, but the test runner appears to use earlier copies of the files. Clearing the cache in the Chromium instance doesn't help.

Is there any possibility files are being cached in another way by the Vite server?

[underoot]

I was able to reproduce the same behaviour by installing loupe@2.3.6 (or any other versions not equals to version, used by @vitest/utils) to project, which prevents dedupling of loupe from @vitest/utils and it moves to node_modules/@vitest/utils/node_modules/loupe

Seems like it caused different behaviour for importing of that module

[hi-ogawa]

I tried to reproduce by installing loupe@2.3.6 but the test is still working on my basic example hi-ogawa/repro-vitest-browser-basic#1

If anyone can reproduce the issue, it might be helpful to know what's in node_modules/.vite/deps/_metadata.json and also the log of DEBUG=vite:deps with optimizeDeps.force.

[underoot]

Well, it seems to me that when you imported in your test loupe it's actually changed behaviour and loupe module was transpiled to ESM module. In your repro repo you can just remove import of loupe from test and write down some stub assertion just for testing

UPD. I see, that after adding of loupe module to test inside node_modules/vite/.deps appeared new entry loupe.js, which is absent when remove it from test. I see that when this file exists in cache folder browser vitest/utils in client code use this transpiled file. Otherwise it uses node_modules/@vitest/utils/node_modules/loupe, which is not transpiled

UPD2. I fixed it by adding vitest > @vitest/utils > loupe entry here https://github.com/vitest-dev/vitest/blob/main/packages/browser/src/node/index.ts#L72. Not sure that it's correct fix

[zmullett]

Can confirm that substituting "vitest > @vitest/utils > loupe" for "vitest > loupe" in /{project_path}/node_modules/@vitest/browser/dist/index.js solved this issue. Also just removing "vitest > loupe" entirely allowed the tests to run 🤷

[hi-ogawa]

Thanks for looking into the issue. Indeed, after commenting out loupe from my test, I can reproduce the issue and then tweaking optimizeDeps.include fixes it. I updated my repository hi-ogawa/repro-vitest-browser-basic#1

I'm not familiar with how Vite figures out those ">" chains, but "vitest > loupe" might be a culprit. I see this when running pnpm ls loupe --depth Infinity:

vitest 1.2.1
├─┬ @vitest/browser 1.2.1 peer
│ └─┬ @vitest/utils 1.2.1
│   └── loupe 2.3.7
├─┬ @vitest/expect 1.2.1
│ ├─┬ @vitest/utils 1.2.1
│ │ └── loupe 2.3.7
│ └─┬ chai 4.4.1
│   └── loupe 2.3.7
├─┬ @vitest/runner 1.2.1
│ └─┬ @vitest/utils 1.2.1
│   └── loupe 2.3.7
├─┬ @vitest/utils 1.2.1
│ └── loupe 2.3.7
└─┬ chai 4.4.1
  └── loupe 2.3.7