Extra HTML pages are not included in Dev mode

[irfandyj]

Build tool

Vite

Where do you see the problem?

• In the browser
• In the terminal

Describe the bug

So, before this I was doing fine with including the HTML pages. However, today I tried installing the file again due to certain bugs. And when I run npm run dev it's not working as it used to be.

Here is my vite.config.ts:

import { fileURLToPath, URL } from 'node:url'
import { resolve } from 'node:path'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import vueDevTools from 'vite-plugin-vue-devtools'
import { crx, ManifestV3Export } from '@crxjs/vite-plugin'
import man from './manifest.json' assert { type: 'json' }

const manifest = man as ManifestV3Export

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    // vueDevTools(),
    crx({ manifest })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      components: fileURLToPath(new URL('./src/components', import.meta.url)),
      pages: fileURLToPath(new URL('./src/components/pages', import.meta.url))
    }
  },
  build: {
    manifest: true,
    emptyOutDir: true,
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'index.html')
      }
    }
  }
})

Reproduction

https://github.com/irfandyj/debug-crxjs-extra-html-pages

Logs

No error logs.

System Info

System:
    OS: Linux 5.15 Ubuntu 24.04.1 LTS 24.04.1 LTS (Noble Numbat)
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11800H @ 2.30GHz
    Memory: 419.51 MB / 5.79 GB
    Container: Yes
    Shell: 5.2.21 - /bin/bash
  Binaries:
    Node: 20.18.0 - ~/.volta/tools/image/node/20.18.0/bin/node
    npm: 10.8.2 - ~/.volta/tools/image/node/20.18.0/bin/npm
    bun: 1.1.30 - ~/.bun/bin/bun
  npmPackages:
    @crxjs/vite-plugin: ^2.0.0-beta.28 => 2.0.0-beta.28
    vite: ^5.4.10 => 5.4.10

Severity

annoyance

[irfandyj]

The reproduction uses the latest, however in my local I uses 2.0.0-beta.25. The result is the same however. I can't put the extra HTML pages in build.rollupOptions.input to dist directory. This is interesting because, I used to run the setup fine. Then I tried to redownload the packages again and suddenly.. It didn't work???

Running bun run build or npm run build build the files perfectly the way I want it to be. But what I want is the easy reloading, and it suddenly didn't work.

[irfandyj]

I found out this can be solved by changing dev script to vite build -w. Although, it's a temporary fix.

[mulingyuer]

“I also encountered this problem. In dev mode, the multiple pages configured in Vite under the input setting do not exist in the dist directory. If you configure web_accessible_resources in the manifest, they will be output to the dist directory, but the TypeScript files will not be compiled into JavaScript.”