vitest-dev
Browser mode throws "Failed to fetch dynamically imported module"
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.
@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'],
}
}
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
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.
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...
I'm seeing the import issue http://localhost:5173/@id/@vitest/coverage-v8/browser?import on vitest 3.0.8 with v8 as my coverage provider
I'm seeing the same issue.
❯ pnpm exec vitest
Testing types with tsc and vue-tsc is an experimental feature.
Breaking changes might not follow SemVer, please pin Vitest's version when using it.
DEV v3.2.3 C:/Users/user/Text/Projects/Aquaticat/monochromatic2025MAY24-pnpmTest
API started at http://localhost:3001/
Coverage enabled with v8
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Unhandled Errors ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
Vitest caught 3 unhandled errors during the test run.
This might cause false positive tests. Resolve unhandled errors to make sure your tests are not affected.
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Prepare Error ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
TypeError: Failed to fetch dynamically imported module: http://localhost:3003/@id/@vitest/coverage-v8/browser?import
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Run Error ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
TypeError: Failed to fetch dynamically imported module: http://localhost:3003/@id/@vitest/coverage-v8/browser?import
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Coverage Error ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
TypeError: Failed to fetch dynamically imported module: http://localhost:3003/@id/@vitest/coverage-v8/browser?import
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
package.json
"devDependencies": {
"vitest": "catalog:",
"vite": "catalog:",
"@vitest/coverage-v8": "catalog:",
"@vitest/browser": "catalog:",
"@vitest/ui": "catalog:",
"playwright": "catalog:",
pnpm-workspace.yaml
packageExtensions:
vite:
peerDependencies:
'strip-literal': '*'
'@vitest/coverage-v8': '*'
vitest:
peerDependencies:
'@vitest/coverage-v8': '>=3.2.3'
'@vitest/browser': '>=3.2.3'
'vite': '*'
'@vitest/ui': '*'
'playwright': '>=1.53.0'
dependencies:
'strip-literal': '>=3.0.0'
# sugarss: '>=5.0.0'
'@vitest/browser':
peerDependencies:
vite: '*'
'@vitest/coverage-v8': '>=3.2.3'
'vite-node':
peerDependencies:
vite: '*'
peerDependencyRules:
allowedVersions:
'@vitejs/plugin-basic-ssl>vite': '>=7.0.0-beta.1'
'vite-plugin-singlefile>vite': '>=7.0.0-beta.1'
'vite-plugin-json5>vite': '>=7.0.0-beta.1'
'@vitest/browser>vite': '>=7.0.0-beta.1'
'@vitest/mocker>vite': '*'
I was experiencing the "Failed to fetch dynamically imported module" error in my CI pipeline but not locally. I was able to reproduce locally by deleting node_modules/.vite and node_module/.vite-temp then running vitest.
I saw these lines in my console output.
[vite] (client) ✨ new dependencies optimized: @emotion/react/jsx-dev-runtime
[vite] (client) ✨ optimized dependencies changed. reloading
Adding this to my vite.config.ts file fixed the import error when I run npx vitest run --browser.headless --no-color.
//# vite.config.ts
/// <reference types="vitest/config" />
/// <reference types="@vitest/browser/providers/playwright" />
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
test: {
browser: {
enabled: true,
// headless:true,
provider: 'playwright',
instances: [
{ browser: 'chromium' },
{ browser: 'firefox' },
],
}
},
optimizeDeps:{
include:["@emotion/react/jsx-dev-runtime"]
}
})
@tonyschwebach Thank you. Adding those deps accordingly to optimizeDeps helped in my case.
Hi there got the same problem, even with the optimizeDeps.
Using Vitest 4.0.15 with : "test:ci": "vitest --browser.headless --coverage --silent --retry 3"
My config :
import { defineConfig } from 'vitest/config';
import react from '@vitejs/plugin-react';
import { playwright } from '@vitest/browser-playwright';
// https://vitejs.dev/config/
// eslint-disable-next-line import/no-default-export
export default defineConfig({
css: {
preprocessorOptions: {
scss: {
quietDeps: true,
},
},
},
optimizeDeps: {
include: ['react', 'react-dom', 'react/jsx-dev-runtime'],
},
test: {
globals: true,
include: ['**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
watch: false,
testTimeout: 5000,
reporters: ['default', 'vitest-sonar-reporter'],
outputFile: 'test-report.xml',
includeTaskLocation: true,
projects: [
{
test: {
name: 'Browser',
browser: {
enabled: true,
provider: playwright({
launchOptions: {
slowMo: 100,
},
}),
// https://vitest.dev/guide/browser/playwright
instances: [{ browser: 'chromium' }],
viewport: {
width: 834,
height: 1112,
},
},
},
},
],
coverage: {
provider: 'v8',
reporter: ['lcov', 'clover'],
},
},
plugins: [react()],
});
Logs :
RUN v4.0.15 /azp/agent/_work/17/s
Coverage enabled with v8
9:46:51 AM [vite] (client) ✨ new dependencies optimized: react/jsx-dev-runtime
9:46:51 AM [vite] (client) ✨ optimized dependencies changed. reloading
Test Files 8 failed (8)
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[2/8]⎯
FAIL Browser (chromium) src/__tests__/EnvoiEmailAttestationEligible.spec.tsx [ src/__tests__/EnvoiEmailAttestationEligible.spec.tsx ]
Error: Failed to import test file /azp/agent/_work/17/s/src/__tests__/EnvoiEmailAttestationEligible.spec.tsx
Caused by: TypeError: Failed to fetch dynamically imported module: http://localhost:63315/node_modules/.vite/vitest/54a2cf5e634dbba0be2bf8a55f79252f5c790bdb/deps/vitest-browser-react.js?v=52a3555d
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[3/8]⎯
FAIL Browser (chromium) src/__tests__/EnvoiEmailAttestationPlusieursAttestationsDisponiblesGed.spec.tsx [ src/__tests__/EnvoiEmailAttestationPlusieursAttestationsDisponiblesGed.spec.tsx ]
Error: Failed to import test file /azp/agent/_work/17/s/src/__tests__/EnvoiEmailAttestationPlusieursAttestationsDisponiblesGed.spec.tsx
Caused by: TypeError: Failed to fetch dynamically imported module: http://localhost:63315/node_modules/.vite/vitest/54a2cf5e634dbba0be2bf8a55f79252f5c790bdb/deps/vitest-browser-react.js?v=52a3555d
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[4/8]⎯
FAIL Browser (chromium) src/__tests__/EnvoiEmailAttestationUneAttestationDisponibleGed.spec.tsx [ src/__tests__/EnvoiEmailAttestationUneAttestationDisponibleGed.spec.tsx ]
Error: Failed to import test file /azp/agent/_work/17/s/src/__tests__/EnvoiEmailAttestationUneAttestationDisponibleGed.spec.tsx
Caused by: TypeError: Failed to fetch dynamically imported module: http://localhost:63315/node_modules/.vite/vitest/54a2cf5e634dbba0be2bf8a55f79252f5c790bdb/deps/vitest-browser-react.js?v=52a3555d
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[5/8]⎯
FAIL Browser (chromium) src/__tests__/GenerationAttestationDisponiblesEnGed.spec.tsx [ src/__tests__/GenerationAttestationDisponiblesEnGed.spec.tsx ]
Error: Failed to import test file /azp/agent/_work/17/s/src/__tests__/GenerationAttestationDisponiblesEnGed.spec.tsx
Caused by: TypeError: Failed to fetch dynamically imported module: http://localhost:63315/node_modules/.vite/vitest/54a2cf5e634dbba0be2bf8a55f79252f5c790bdb/deps/vitest-browser-react.js?v=52a3555d
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[6/8]⎯
FAIL Browser (chromium) src/__tests__/GenerationAttestationEligibles.spec.tsx [ src/__tests__/GenerationAttestationEligibles.spec.tsx ]
Error: Failed to import test file /azp/agent/_work/17/s/src/__tests__/GenerationAttestationEligibles.spec.tsx
Caused by: TypeError: Failed to fetch dynamically imported module: http://localhost:63315/node_modules/.vite/vitest/54a2cf5e634dbba0be2bf8a55f79252f5c790bdb/deps/vitest-browser-react.js?v=52a3555d
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[7/8]⎯
FAIL Browser (chromium) src/__tests__/RechercheContrat.spec.tsx [ src/__tests__/RechercheContrat.spec.tsx ]
Error: Failed to import test file /azp/agent/_work/17/s/src/__tests__/RechercheContrat.spec.tsx
Caused by: TypeError: Failed to fetch dynamically imported module: http://localhost:63315/azp/agent/_work/17/s/src/__tests__/RechercheContrat.spec.tsx?import&browserv=1764928008479
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[8/8]⎯
You need to have optimizeDeps inside the browser project:
import { defineConfig } from 'vitest/config';
import react from '@vitejs/plugin-react';
import { playwright } from '@vitest/browser-playwright';
// https://vitejs.dev/config/
// eslint-disable-next-line import/no-default-export
export default defineConfig({
css: {
preprocessorOptions: {
scss: {
quietDeps: true,
},
},
},
test: {
globals: true,
include: ['**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
watch: false,
testTimeout: 5000,
reporters: ['default', 'vitest-sonar-reporter'],
outputFile: 'test-report.xml',
includeTaskLocation: true,
projects: [
{
// here!
optimizeDeps: {
include: ['react', 'react-dom', 'react/jsx-dev-runtime'],
},
test: {
name: 'Browser',
browser: {
enabled: true,
provider: playwright({
launchOptions: {
slowMo: 100,
},
}),
// https://vitest.dev/guide/browser/playwright
instances: [{ browser: 'chromium' }],
viewport: {
width: 834,
height: 1112,
},
},
},
},
],
coverage: {
provider: 'v8',
reporter: ['lcov', 'clover'],
},
},
plugins: [react()],
});
Well, i didn't know that optimizeDeps was also inside the browser context ! It's working ;)