Issue with RouterView in Vue Router 4 in WXT Production Builds

[accessun]

I am encountering an issue with the <router-view/> component from vue-router 4 while working with WXT production builds.

In my WXT project, I have implemented page component routing using basic <router-link> and <router-view> elements in the popup page. Upon triggering a production build with 'npm run build' and loading the chrome-v3 folder into Chrome, I noticed that when clicking links corresponding to <router-link>s, <router-view> renders nothing but an empty comment <!----> in the DOM tree.

When I use npm run dev to run the extension in dev mode, everything functions as expected.

I am curious if this behavior could possibly be a bug related to the WXT production build process. Or did I configured anything incorrectly?

For context, the versions of env and dependencies of my WXT project are:

• vue: "^3.4.27"
• vue-router: "^4.4.0"
• npm: "10.7.0"
• node: "v20.14.0"

I would appreciate any insights or assistance in resolving this issue. Thank you for your attention.

The followings are the relevant files in my project:

/entrypoints/popup/main.ts

import { createApp } from "vue";
import App from "./App.vue";
import { router } from "./router";

createApp(App).use(router).mount("#app");

/entrypoints/popup/router.ts

import { createRouter, createWebHashHistory } from "vue-router";

const routes = [
  { path: "/popup/page_a", component: import("@/components/popup/page_a.vue") },
  { path: "/popup/page_b", component: import("@/components/popup/page_b.vue") },
];

export const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

/entrypoints/popup/App.vue

<template>
  <div>
    <p>Click to change view</p>
    <div>
      <button>
        <router-link to="/popup/page_a">Page A</router-link>
      </button>
      <button>
        <router-link to="/popup/page_b">Page B</router-link>
      </button>
    </div>
    <div style="border: 2px; border-color: blue;">
      <router-view></router-view>
    </div>
  </div>
</template>

<script lang="ts" setup></script>

[aklinker1]

Hmm, interesting. I think you need to use arrow functions for the route components? I didn't think component accepted promises, either a regular imported component or an arrow function with a dynamic import to split pages into chunks.

  const routes = [
-   { path: "/popup/page_a", component: import("@/components/popup/page_a.vue") },
-   { path: "/popup/page_b", component: import("@/components/popup/page_b.vue") },
+   { path: "/popup/page_a", component: () => import("@/components/popup/page_a.vue") },
+   { path: "/popup/page_b", component: () => import("@/components/popup/page_b.vue") },
  ];

[accessun]

You are right. After changing to the arrow functions for the routed components, production builds work perfectly. Thank you so much!