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.

[src-r-r]

Another potential symptom (I'm not sure if it's related). Path aliases aren't being resolved.

I have the following path alias in my vite config:

  resolve: {
    alias: [
      {
        find: "@",
        replacement: resolve(root, "src"),
      },
      {
        find: "~",
        replacement: resolve(root, "node_modules"),
      },
    ],
  },

During development (without the web-extension plugin), works just fine. However, code like this:

import { IconSet } from "@/lib/util/graphic";

Results in an error like:

vite v5.4.10 building for production...
✓ 3 modules transformed.
x Build failed in 99ms
✓ 0 modules transformed.
[web-extension:manifest] [vite]: Rollup failed to resolve import "@/lib/util/graphic" from "<project>/src/apps/popup.ts".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
transforming (26) node_modules/.pnpm/@vue+reactivity@3.5.12/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js

What has me thinking it might be related is that I encountered that "failed to parse source" error myself. I went to investigate, but saw I had a relative path import in a script file (I hate relative path imports), so I converted it to the path alias I had throughout the program.

Like I said, I'm not getting this import error during development and unit testing. Only during building.