Browser mode throws "Failed to fetch dynamically imported module"

Ked57 commented 8 months ago

Describe the bug

I'm in the process of comparing all of the test runners on a very basic vue 3 composition API + TS app. So i setup testing lib and a basic test, it worked. Then I tried to add @vitest/browser and I updated vitest.config.ts to use playwright and chromium but vitest started errors like

ReferenceError: Vue is not defined

Reproduction

I haven't seen this error anywhere else but I reproduced it in StackBlitz, the setup is fairly similar to the one on my machine and gives the same result

https://stackblitz.com/edit/vitest-dev-vitest-urjsz7

Could it be a setup error on my part ? Or is it a bug ?

System Info

 System:
    OS: macOS 14.3
    CPU: (8) arm64 Apple M2
    Memory: 532.70 MB / 24.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.14.2 - ~/.nvm/versions/node/v18.14.2/bin/node
    npm: 9.5.0 - ~/.nvm/versions/node/v18.14.2/bin/npm
    pnpm: 8.15.3 - /opt/homebrew/bin/pnpm
    bun: 1.1.0 - ~/.bun/bin/bun
  Browsers:
    Chrome: 123.0.6312.87
    Safari: 17.3
  npmPackages:
    @vitejs/plugin-vue: ^4.6.2 => 4.6.2 
    @vitest/browser: ^1.4.0 => 1.4.0 
    @vitest/ui: ^1.4.0 => 1.4.0 
    vite: ^4.5.3 => 4.5.3 
    vitest: ^1.4.0 => 1.4.

Used Package Manager

npm

Validations

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

sheremet-va commented 8 months ago

@vue/test-utils expects Vue to be defined on a global object (UMD) in its browser build for some reason. Try deduping Vue in the config instead:

export default {
  resolve: {
    dedupe: ['vue'],
  }
}

Ked57 commented 8 months ago

it solves the Vue import issue and now it's another module. I updated the stackblitz

TypeError: Failed to fetch dynamically imported module: https://vitestdevvitesturjsz7-5l23--5179--7dbe22a9.local-credentialless.webcontainer.io/home/projects/vitest-dev-vitest-urjsz7/test/Hello.spec.ts?browserv=0

EDIT: Hmm there's actually an error above,

3:29:21 PM [vite] Pre-transform error: Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files.

@vitejs/plugin-vue is installed tough

favna commented 2 months ago

I'm also facing this issue but with importing http://localhost:5173/@id/@vitest/coverage-v8/browser?import and only in GitHub actions: https://github.com/sapphiredev/shapeshift/actions/runs/10980659362/job/30486718676?pr=396. This is clearly not something I can influence, because it's a vitest library. I also get the same issue with coverage Istanbul as seen here: https://github.com/sapphiredev/shapeshift/actions/runs/10979357381/job/30483626781?pr=396.

Notably, downgrading from 2.1.1 to 2.0.5 (and switching back to Istanbul) does solve the issue.

hl662 commented 1 week ago

We're seeing the same problem, trying to bump up from 2.1.0 to 2.1.5 in a monorepo project - it only happens in browser mode, on both CI runners (run in Azure DevOps) and when run locally...

vitest-dev / vitest