Vue 3 Router issue, no outlet, no displayed content

Question

I have a vue3 application which works perfectly fine when embedding all packages in the directly (locally) in the output bundle.

package.json

 "vue": "^3.4.29",
 "vue-router": "^4.3.3"
....

I wish to utilize externals to decrease my bundle size and load time etc.

I configure rollup with the necessary properties for externals as can be seen below:

{
  "modulePreload": false,
  "chunkSizeWarningLimit": 500,
  "rollupOptions": {
    "external": [
      "@gtm-support/vue-gtm",
      "@microsoft/applicationinsights-core-js",
      "@microsoft/applicationinsights-web",
      "@tailwindcss/typography",
      "@vueuse/components",
      "chart.js",
      "class-variance-authority",
      "clsx",
      "elevio",
      "lodash-es",
      "lucide-vue-next",
      "mapbox-gl",
      "pinia",
      "supercluster",
      "tailwind-merge",
      "tailwind-scrollbar",
      "tailwindcss-animate",
      "vue",
      "vue-router"
    ],
    "output": {
      "paths": {
        "@gtm-support/vue-gtm": "https://cdn.jsdelivr.net/npm/@gtm-support/vue-gtm@^2.2.0/+esm",
        "@microsoft/applicationinsights-core-js": "https://cdn.jsdelivr.net/npm/@microsoft/applicationinsights-core-js@^3.2.2/+esm",
        "@microsoft/applicationinsights-web": "https://cdn.jsdelivr.net/npm/@microsoft/applicationinsights-web@^3.2.2/+esm",
        "@tailwindcss/typography": "https://cdn.jsdelivr.net/npm/@tailwindcss/typography@^0.5.13/+esm",
        "@vueuse/components": "https://cdn.jsdelivr.net/npm/@vueuse/components@^10.11.0/+esm",
        "chart.js": "https://cdn.jsdelivr.net/npm/chart.js@^4.4.3/+esm",
        "class-variance-authority": "https://cdn.jsdelivr.net/npm/class-variance-authority@^0.7.0/+esm",
        "clsx": "https://cdn.jsdelivr.net/npm/clsx@^2.1.1/+esm",
        "elevio": "https://cdn.jsdelivr.net/npm/elevio@^1.3.8/+esm",
        "lodash-es": "https://cdn.jsdelivr.net/npm/lodash-es@^4.17.21/+esm",
        "lucide-vue-next": "https://cdn.jsdelivr.net/npm/lucide-vue-next@^0.321.0/+esm",
        "mapbox-gl": "https://cdn.jsdelivr.net/npm/mapbox-gl@^3.4.0/+esm",
        "pinia": "https://cdn.jsdelivr.net/npm/pinia@^2.1.7/+esm",
        "supercluster": "https://cdn.jsdelivr.net/npm/supercluster@^8.0.1/+esm",
        "tailwind-merge": "https://cdn.jsdelivr.net/npm/tailwind-merge@^2.3.0/+esm",
        "tailwind-scrollbar": "https://cdn.jsdelivr.net/npm/tailwind-scrollbar@^3.1.0/+esm",
        "tailwindcss-animate": "https://cdn.jsdelivr.net/npm/tailwindcss-animate@^1.0.7/+esm",
        "vue": "https://cdn.jsdelivr.net/npm/vue@^3.4.29/+esm",
        "vue-router": "https://cdn.jsdelivr.net/npm/vue-router@^4.3.3/+esm"
      }
    }
  },
  "treeshake": true
}

I ensure vite resolve.dedupe is specified as below

{
  "dedupe": [
    "@gtm-support/vue-gtm",
    "@microsoft/applicationinsights-core-js",
    "@microsoft/applicationinsights-web",
    "@tailwindcss/typography",
    "@vueuse/components",
    "chart.js",
    "class-variance-authority",
    "clsx",
    "elevio",
    "lodash-es",
    "lucide-vue-next",
    "mapbox-gl",
    "pinia",
    "supercluster",
    "tailwind-merge",
    "tailwind-scrollbar",
    "tailwindcss-animate",
    "vue",
    "vue-router"
  ]
}

And here is my App.vue

<script setup lang="ts">
debugger;
</script>
<template>
  <div class="shrink grow">
      <router-view :key="$route.fullPath" />
  </div>  
</template>

Unfortunately, when I attempt this everything loads without error yet the vue-router is not rendering any data (the outlet).

In the place where I would see my normal components from the loaded page, I instead see an HTML comment <!----> vnode...

Since this is happening only in the production build when using externals I have difficulty getting the vue debug tools to work in this situation.

Most importantly I find no good reason why the content specified by the router is loaded (I see the chunk load) however the embedded setup method is never called.

1. Is there any reason why I only see the html comment?
2. Why is setup never called? (not even a debugger statement is triggered) for example:

<script lang="ts" setup>
import { onMounted } from 'vue';
debugger;
onMounted(()=>{
debugger;
});
</script>

If I remove the externalization of vue-router, everything works as expected.

I am asking this question humbly and seeking any advice on how to debug this issue or what the root cause may be, I don't want to have to unwrap and reverse engineer vue to find out the reason myself but if I cannot find any advice I will have to do the aforementioned.

If you need more information let me know what you would otherwise need and I will provide such.

You can find a minimal viable reproduction of this problem in my repo here

And the official issue I have with the vue project here and with vite here

Answer 1

Apparently, this was happening due to duplicated versions of Vue being loaded at the same time; Per the response here See I tried the latest version of vue-router@4.4.0 and had much more success.