Fails to load: browser.provider and tsconfig issue with Vitest 4 #675
Description
Describe the bug
When launching VSCode I get greeted with the dialog that vitest couldn't start. It happened since I migrated to Vitest V4 (which doesn't seem unsupported, looking at recent github issues)
I see two things happen:
- browser.provider issue
- tsconfig issue
Browser.provider was migrated in V4 where it no longer accepts a string but it requires a function. Which my vitest config now has:
browser: {
instances: [
{ browser: 'chromium' },
],
provider: playwright(),
},
For the tsconfig issue, I don't know where it came from. As far as I know it has always worked but looking at the error, it seems to look for the file in the wrong folder. When I provide it with my angular() setup in the config, it also fails to recognize where the file is. So I don't think its a configuration issue.
Reproduction
My current vitest config:
import angular from '@analogjs/vite-plugin-angular';
import { playwright } from '@vitest/browser-playwright';
import viteTsConfigPaths from 'vite-tsconfig-paths';
import { defineConfig } from 'vitest/config';
/// <reference types="vitest/config" />
/// <reference types="@vitest/browser" />
// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
return {
plugins: [
angular(),
viteTsConfigPaths(),
],
test: {
globals: true,
environment: 'jsdom',
setupFiles: ['src/testing/test-setup.ts'],
include: ['**/*.spec.ts'],
reporters: ['junit', 'json','verbose'],
slowTestThreshold: 1000,
outputFile: {
junit: './test-results/unit-results/junit-report.xml',
json: './test-results/unit-results/json-report.json',
},
server: {
deps: {
// prevent various errors for when using and mocking libraries
// for example, this prevents the inject error even if you mocked something
inline: [
// Angular core and related packages
/@angular/,
// Testing utilities
'@ngneat/spectator',
'ng-mocks',
// UI and component libraries
'primeng',
'lucide-angular', // Added to properly handle mocking
'@ngx-translate',
// Additional libraries that integrate with Angular
'keycloak-angular',
'keycloak-js',
// Any library that provides Angular decorators or DI
/@ngneat/, // Covers other ngneat packages if used
/@ngx-/, // Covers various ngx- prefixed packages
/@ng-/ // Covers various ng- prefixed packages
],
},
},
coverage: {
provider: 'v8',
reporter: [
['lcovonly'],
['text'],
['json', { 'file': 'coverage.json' }],
['html', { 'file': 'index.html' }]
],
reportsDirectory: './test-results/unit-coverage',
include: ['src/**/*'],
exclude: ['src/testing/**/*', 'src/**/*.interfaces.ts', 'src/**/*.constants.ts', 'src/assets/**/*'],
skipFull: true, // Skips files with 100% coverage on statement, branch and function on list while keeping in lcov report
},
browser: {
instances: [
{ browser: 'chromium' },
],
provider: playwright(),
},
allowOnly: true,
expect: {
requireAssertions: true,
},
typecheck: {
enabled: true,
checker: 'tsc',
tsconfig: './tsconfig.spec.json',
},
},
define: {
'import.meta.vitest': mode !== 'production',
},
server: {
port: 5173
},
build: {
sourcemap: true,
},
};
});
Output
[Error 10:26:51 AM] [Error Error] Vitest failed to start:
TypeError: The `browser.provider` configuration was changed to accept a factory instead of a string. Add an import of "playwright" from "@vitest/browser-playwright" instead. See: https://vitest.dev/guide/browser/config#provider
at resolveConfig$1 (file:///<my FE folder>/node_modules/.pnpm/[email protected]_@types+debug@4_b63daafcb5af813775d859cbfc25f465/node_modules/vitest/dist/chunks/coverage.CSfvENE1.js:2662:9)
at Vitest._setServer (file:///<my FE folder>/node_modules/.pnpm/[email protected]_@types+debug@4_b63daafcb5af813775d859cbfc25f465/node_modules/vitest/dist/chunks/cli-api.BxbUFDR6.js:10410:20)
at BasicMinimalPluginContext.handler (file:///<my FE folder>/node_modules/.pnpm/[email protected]_@types+debug@4_b63daafcb5af813775d859cbfc25f465/node_modules/vitest/dist/chunks/cli-api.BxbUFDR6.js:11145:23)
at _createServer (file:///<my FE folder>/node_modules/.pnpm/[email protected]_@types+node@24._2594bb31c2ee804557b55ba4f13aee21/node_modules/vite/dist/node/chunks/config.js:28178:97)
at async createViteServer (file:///<my FE folder>/node_modules/.pnpm/[email protected]_@types+debug@4_b63daafcb5af813775d859cbfc25f465/node_modules/vitest/dist/chunks/cli-api.BxbUFDR6.js:8398:17)
at async Module.createVitest (file:///<my FE folder>/node_modules/.pnpm/[email protected]_@types+debug@4_b63daafcb5af813775d859cbfc25f465/node_modules/vitest/dist/chunks/cli-api.BxbUFDR6.js:11174:14)
at async Module.Be (<My windows profile>\.vscode\extensions\vitest.explorer-1.32.1\dist\workerNew.js:3:8229)
at async t (<My windows profile>\.vscode\extensions\vitest.explorer-1.32.1\dist\worker.js:7:3471)
Error: Vitest failed to start:
TypeError: The `browser.provider` configuration was changed to accept a factory instead of a string. Add an import of "playwright" from "@vitest/browser-playwright" instead. See: https://vitest.dev/guide/browser/config#provider
at resolveConfig$1 (file:///<my FE folder>/node_modules/.pnpm/[email protected]_@types+debug@4_b63daafcb5af813775d859cbfc25f465/node_modules/vitest/dist/chunks/coverage.CSfvENE1.js:2662:9)
at Vitest._setServer (file:///<my FE folder>/node_modules/.pnpm/[email protected]_@types+debug@4_b63daafcb5af813775d859cbfc25f465/node_modules/vitest/dist/chunks/cli-api.BxbUFDR6.js:10410:20)
at BasicMinimalPluginContext.handler (file:///<my FE folder>/node_modules/.pnpm/[email protected]_@types+debug@4_b63daafcb5af813775d859cbfc25f465/node_modules/vitest/dist/chunks/cli-api.BxbUFDR6.js:11145:23)
at _createServer (file:///<my FE folder>/node_modules/.pnpm/[email protected]_@types+node@24._2594bb31c2ee804557b55ba4f13aee21/node_modules/vite/dist/node/chunks/config.js:28178:97)
at async createViteServer (file:///<my FE folder>/node_modules/.pnpm/[email protected]_@types+debug@4_b63daafcb5af813775d859cbfc25f465/node_modules/vitest/dist/chunks/cli-api.BxbUFDR6.js:8398:17)
at async Module.createVitest (file:///<my FE folder>/node_modules/.pnpm/[email protected]_@types+debug@4_b63daafcb5af813775d859cbfc25f465/node_modules/vitest/dist/chunks/cli-api.BxbUFDR6.js:11174:14)
at async Module.Be (<My windows profile>\.vscode\extensions\vitest.explorer-1.32.1\dist\workerNew.js:3:8229)
at async t (<My windows profile>\.vscode\extensions\vitest.explorer-1.32.1\dist\worker.js:7:3471)
at r.a (<my windows profile>\.vscode\extensions\vitest.explorer-1.32.1\dist\extension.js:12:2544)
at r.emit (node:events:519:28)
at r.emit (node:domain:489:12)
at Wr.Ul (<my windows profile>\.vscode\extensions\vitest.explorer-1.32.1\dist\extension.js:1:38370)
at Wr.emit (node:events:519:28)
at Wr.emit (node:domain:489:12)
at Wr.dataMessage (<my windows profile>\.vscode\extensions\vitest.explorer-1.32.1\dist\extension.js:1:15831)
at Wr.getData (<my windows profile>\.vscode\extensions\vitest.explorer-1.32.1\dist\extension.js:1:14694)
at Wr.startLoop (<my windows profile>\.vscode\extensions\vitest.explorer-1.32.1\dist\extension.js:1:11264)
at Wr._write (<my windows profile>\.vscode\extensions\vitest.explorer-1.32.1\dist\extension.js:1:10548)
at writeOrBuffer (node:internal/streams/writable:572:12)
at _write (node:internal/streams/writable:501:10)
at Writable.write (node:internal/streams/writable:510:10)
at Socket.jt (<my windows profile>\.vscode\extensions\vitest.explorer-1.32.1\dist\extension.js:1:39348)
at Socket.emit (node:events:519:28)
at Socket.emit (node:domain:489:12)
at addChunk (node:internal/streams/readable:561:12)
at readableAddChunkPushByteMode (node:internal/streams/readable:512:3)
at Socket.Readable.push (node:internal/streams/readable:392:5)
at TCP.onStreamRead (node:internal/stream_base_commons:189:23)
Error 2:
[INFO 10:26:51 AM] [Worker] [@analogjs/vite-plugin-angular]: Unable to resolve tsconfig at <my FE folder>\dist\out-tsc\tsconfig.spec.json. This causes compilation issues. Check the path or set the "tsconfig" property with an absolute path.Extension Version
1.32.1
Vitest Version
4.0.4
Validations
- Check that you are using the latest version of the extension
- 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.