Vue doesn't work if Vite build is used programmatically and config is passed inline

[dword-design]

Summary

I get a Vue parse error when I build with Vite programmatically and pass the config directly to build.

import { build } from 'vite'
import vue from '@vitejs/plugin-vue'
import webExtension from 'vite-plugin-web-extension'

build({
  plugins: [
    vue(),
    webExtension(),
  ],
})

It does work with Vite createServer and it also works when the config is in vite.config.js.

Error [RollupError]: [web-extension:manifest] [vite:build-import-analysis] Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files.
file: /Users/sebastianlandwehr/Desktop/try-vite-plugin-web-extension/popup.vue:2:24
1: <template>
2:   <p>Hello vue popup</p>
                           ^
3: </template>
file: /Users/sebastianlandwehr/Desktop/try-vite-plugin-web-extension/popup.vue:2:24
1: <template>
2:   <p>Hello vue popup</p>
                           ^
3: </template>

Reproduction

https://github.com/dword-design/demo-vite-plugin-web-extension-bug-build-programmatically

[aklinker1]

Hmm, interesting. I've never tried using the build call directly, but I would have expected it to work just fine.

[aklinker1]

I probably won't have time to work on this, I'm really focused on WXT right now.

[dword-design]

@aklinker1 Addition: it works when setting webExtension({ htmlViteConfig: { plugins: [vue()] } }), but of course it's only a quickfix.

[dword-design]

Same issue applies for a custom build.outDir. Manifest is built it the correct dir, the other files are built unter the default dist dir.