Excessive stack depth Error

[amrap030]

Hello, I am trying to build a universal library for renderless components and composables as a plugin for Vue2 and Vue3 with the use of vue-demi. When I try to use the plugin in my Vue3 application locally via yarn link I get the following error: Excessive stack depth comparing types 'Plugin_2' and 'Plugin_2'. I am not sure if this is related to vue-demi, but I assume that, because my Vue3 application seems to interpret this plugin as a Vue2 plugin I guess.

This is the repository of the Plugin: https://github.com/whitelabel-market/wallet-connector-vue

The plugin is created like this:

import {
  ConnectModal,
  ConnectContent,
  ConnectTitle,
  ConnectButton,
} from "./components/modal";
import { WALLET_CONTEXT, createWallet } from "./hooks";
import type { App, Plugin } from "vue-demi";

export function WalletConnectorVue(options: any): Plugin {
  return {
    install(app: App) {
      app.component("ConnectModal", ConnectModal);
      app.component("ConnectContent", ConnectContent);
      app.component("ConnectTitle", ConnectTitle);
      app.component("ConnectButton", ConnectButton);
      app.provide(WALLET_CONTEXT, createWallet(options));
    },
  };
}

You can reproduce this when you use the library as follows:

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import { INFURA_ID } from "./utils/constants";
import { WalletConnectorVue } from "@whitelabel-solutions/wallet-connector-vue/dist";

const app = createApp(App);

app.use(
  WalletConnectorVue({
    appName: "App Name",
    infuraId: INFURA_ID,
    chainId: 1,
    authereum: { key: "" }, // Yet required (but unused) in ConnectorUserOptions type
    fortmatic: { key: "" }, // Yet required (but unused) in ConnectorUserOptions type
  })
);

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

Notice that I am using the local build from the /dist folder! The /dist folder can be built with pnpm build

The VSCode intellisense also shows me this error directly:

One thing I noticed is, that when I use this not as a plugin and just import the components directly, it works. The following example also works:

const app = createApp({
  setup() {
    provide(
      WALLET_CONTEXT,
      createWallet({
        appName: "App Name",
        infuraId: INFURA_ID,
        chainId: 1,
        authereum: { key: "" }, // Yet required (but unused) in ConnectorUserOptions type
        fortmatic: { key: "" }, // Yet required (but unused) in ConnectorUserOptions type
      })
    );
  },
  render: () => h(App),
});

Only when using this as a plugin as described above, it doesn't work. I really need help here, because I have absolutely no idea how to fix this.

[amrap030]

I just tested this with the built version from npm (https://www.npmjs.com/package/@whitelabel-solutions/wallet-connector-vue) and this is working.

So I assume this has something to do with the local development but I am not sure why, because the /dist folder is the same as what is published on npm. So how can I make it work locally in development, because I can't always publish on npm first to check new change.

[amrap030]

Hello, can anyone please help? The problem still exists.