Page navigation with Nuxt3/Electron not working - not allowed to load local resource with '#'

Question

I am using electron-forge to build a project using this nuxt-electron module with

npx nuxi generate && electron-forge make

the build works fine and I am also able to start the app and the first page (.output/public/index.html) loads fine but when trying to navigate to a different page using this.$router.push('/mypage/subpage') I just get a blank page and the error:

chromewebdata/:1 Not allowed to load local resource: file:///[app-path]/resources/app.asar/.output/public/#/mypage/subpage

with the folder structure in nuxt like so

.
└── pages/
    └── mypage/
        └── subpage.vue

I suspect that there is a problem in my nuxt build config or the router since '#/mypage/subpage' is not a valid file path and the build output (in the app.asar) looks like this:

.
├── .output/
│   ├── public/
│   │   ├── _nuxt/
│   │   │   ├── [.js files]
│   │   │   └── [.css files]
│   │   ├── 200.html
│   │   ├── 404.html
│   │   └── index.html
│   └── nitro.json
├── .dist-electron/
│   └── ...
├── .node_modules/
│   └── ...
└── pacakge.json

snapshop of part of the _nuxt folder:

this is my current nuxt config file:

import fs from 'node:fs'
import path from 'node:path'
import process from 'node:process'
import pkg from './package.json'

import { defineNuxtConfig } from 'nuxt/config'
import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
import eslint from 'vite-plugin-eslint2'

const __dirname = import.meta.url
fs.rmSync(path.join(__dirname, '..', 'dist-electron'), { recursive: true, force: true })

export default defineNuxtConfig({
  app: {
    head: {
      meta: [
        { charset: 'utf-8' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
        {
          hid: 'description',
          name: 'description',
          content: process.env.npm_package_description || '',
        },
      ],
      link: [{ rel: 'icon', type: 'image/x-icon', href: 'static/favicon.ico' }],
    },
  },
  devtools: { enabled: process.env.NODE_ENV === 'development' },
  modules: [
    'nuxt-electron',
    '@nuxt/eslint',
    '@pinia/nuxt',
    (_options, nuxt) => {
      if (!nuxt.options.dev) {
        nuxt.options.nitro.runtimeConfig ??= {}
        nuxt.options.nitro.runtimeConfig.app ??= {}
        nuxt.options.nitro.runtimeConfig.app.baseURL = './'
      }
      nuxt.hooks.hook('vite:extendConfig', (config) => {
        // @ts-expect-error
        config.plugins.push(vuetify({ autoImport: true }))
      })
    },
  ],
  electron: {
    disableDefaultOptions: true,
    build: [
      {
        // Main-Process entry file of the Electron App.
        entry: process.env.NODE_ENV !== 'testing' ? 'electron/main.mts' : 'electron/testing.mts',
      },
      {
        entry: 'electron/preload.mts',
        onstart(args) {
          // Notify the Renderer-Process to reload the page when the Preload-Scripts build is complete,
          // instead of restarting the entire Electron App.
          args.reload()
        },
      },
    ],
  },
  ssr: false,
  router: {
    options: {
      hashMode: true,
    },
  },
  build: {
    transpile: ['vuetify'],
  },
  vite: {
    build: {
      minify: process.env.NODE_ENV === 'production',
      rollupOptions: {
        external: ['fsevents', ...Object.keys('dependencies' in pkg ? pkg.dependencies : {})],
      },
    },
    vue: {
      template: {
        transformAssetUrls,
      },
    },
    plugins: [
      eslint({
        fix: true,
        cache: false,
      }),
    ],
    // TODO: check additionalData @use statements
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `
        @use "~/assets/scss/abstracts/_index.scss" as *;
        @use "~/assets/scss/main.scss"  as *;
        `,
        },
      },
    },
  },
})

I have already tried a bunch of solutions for similar Not allowed to load local resource error messages but most are related to not being able to load the initial index.html files etc. not the page navigation.

Answer 1

It turned out to be linked to the rollupOptions.external I initially added as a fix for an issue like to this

Removing ...Object.keys('dependencies' in pkg ? pkg.dependencies : {}) fixed the issue with the page loading!