Troubleshooting import deps

[Andy-d-g]

Hello, I try to use "vue-router" into my component.

I understand that I need to add the deps into moduleCache

So my worflow looks like this :

import * as VueRouter from "vue-router";
import * as Vue from "vue";
import router from "./router";

Vue.defineAsyncComponent(() =>
  loadModule("comp-name", {
    moduleCache: {
      vue: Vue,
      "vue-router": VueRouter,
      router: router,
    },
    getFile: () => Promise.resolve("Component.vue as text format"),
    addStyle: (textContent) => {
      const style = document.createElement("style");
      style.textContent = textContent;
      const ref = document.head.getElementsByTagName("style")[0] || null;
      document.head.insertBefore(style, ref);
    },
  }),
);

Component.vue

<template>
  <header>
     <RouterLink to="/">test</RouterLink>
  </header>
</template>

<script setup lang="ts">
import router from "router";
import { RouterLink } from "vue-router";
</script>

It works well without deps, but when I import vue-router to use RouterLink, it doesn't.

[Vue warn]: injection "Symbol(router)" not found. 
[Vue warn]: injection "Symbol(route location)" not found.
TypeError: router is undefined
Component is missing template or render function.

I already check this Q&A but don't show any implementation : #74

Can you help me ?

Thx

[FranckFreiburger]

please look at vue-router@4 example