viteOverrides option in startVitest doesn't affect browser mode config

[Florent-Bouisset]

Describe the bug

When using the experimental "browser mode", the import of custom files is not working although I have added a vite plugin that is telling how this import should be handled.

Importing a file like so works well in non browser mode, but it's not working in browser mode.

import bifExample from './example.bif?arraybuffer'

Result in this error in browser mode:

error log: [vite] Internal server error: Failed to parse source for import analysis because the content contains 
invalid JS syntax. You may need to install appropriate plugins to handle the .bif?arraybuffer file format, 
or if it's an asset, add "**/*.bif?arraybuffer" to  assetsInclude in your configuration. 
Plugin: vite:import-analysis

Reproduction

https://github.com/Florent-Bouisset/bug-vitest-repo

npm i
npm run test:node # works normally
npm run test:browser # error

System Info

System:
    OS: macOS 14.2.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 47.25 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 21.0.0 - ~/.nvm/versions/node/v21.0.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v21.0.0/bin/yarn
    npm: 10.2.0 - ~/.nvm/versions/node/v21.0.0/bin/npm
  Browsers:
    Chrome: 120.0.6099.234
    Safari: 17.2.1
  npmPackages:
    @vitest/browser: 1.2.1 => 1.2.1 
    vitest: 1.2.1 => 1.2.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.

[sheremet-va]

Interesting usage of a public API 🤔 "viteOverrides" is only applied to the main server, the browser has its own separate server and it doesn't use this option at all (aliases also won't work for example). This is probably a bug, but I am not sure.

[hi-ogawa]

Just in case, I verified that plugin usage with normal vite.config.ts is working fine for browser mode
https://stackblitz.com/edit/vitest-dev-vitest-fg3qe5?file=vite.config.ts

As @sheremet-va suggested, I think the issue is more like startVitest + viteOverrides API and how it can affect browser mode config.

While thinking about how browser mode server config can be affected by main server config, I thought we can potentially pass project.server.config.plugins to browser mode server around here, but of course, this is not supposed to work for many reason, such as, these plugins are already "instantiated" ones and cannot be reused for a different plugin container, then also these plugins already includes vite/vitest's internal plugins.

vitest/packages/vitest/src/integrations/browser/server.ts

Line 9 in d53b858

export async function createBrowserServer(project: WorkspaceProject, configFile: string | undefined) {

I feel this is inherent limitation of inline config and running multiple vite servers, which actually comes up sometimes in the ecosystem such as remix-run/remix#7990 (Remix was reusing already instantiated plugins in two servers) and also solidjs/solid-start#1198 (I'm not too familiar but solid/vinxi also has multiple servers). So this user's browser mode use case might be difficult to support without tweaking API in some explicit way.

[sheremet-va]

There is a concept of a "core workspace project" in Vitest API. This is a project that is responsible for higher-level features that you cannot have on a workspace level like a global setup or coverage. The browser server is part of a workspace project and is not affected by the viteOverrides - it only affects the "core project".