Build unable to resolve module specifier "vue"

[Kurohyou]

I've been working on a chrome extension for a while that uses an extension page instead of a popup. I'm using Vue with CRXJS to build the extension. The extension works great in dev, but when I build, the extension page fails to load (just blank white page) and I get the following error in the console:

Uncaught TypeError: Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../".

Here's what my main.js in build looks like:

import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from '@/pages/interface/App.vue'
import router from '@/pages/interface/router'
import 'I/assets/setup.scss';

const app = createApp(App)
app.use(createPinia())
app.use(router)

app.mount('#app')

Here's what my vite.config.js is:

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

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { crx } from '@crxjs/vite-plugin'
import manifest from './manifest.json' assert { type: 'json' } // Node >=17
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    crx({ manifest })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      'I':fileURLToPath(new URL('./src/pages/interface', import.meta.url))
    }
  }
})

Also The public directory does not appear in the build directory

Anyone got an idea of what I've done wrong?

[Kurohyou]

and the answer is that I didn't have the rollup build options set for additional pages.