Excessive stack depth comparing types 'Plugin_2' and 'Plugin_2'

[amrap030]

Bug Report

🔎 Search Terms

• Excessive stack depth comparing types

🕗 Version & Regression Information

Occurs on all Typescript versions Node: v16.15.0

🙁 Actual behavior

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 or to typescript. The same issue is also posted here: https://github.com/vueuse/vue-demi/issues/160

I already tried some solutions from other similar issues, for example changing the VSCode Typescript version to the workspace version with several versions with no luck.

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 in a Vue3 project with typescript:

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.

🙂 Expected behavior

No error

[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.

[andrewbranch]

You have two separate copies of @vue/runtime-core loaded into your program. It looks like one is a dependency of your plugin and the other is a dependency of the mondrians project. The plugin should likely declare @vue/runtime-core as a peerDependency. Or since you say it’s working in a production-like scenario, you may have it configured correctly, but loading the plugin via npm link such that all its devDependencies are installed is going to create problems locally.

[typescript-bot]

This issue has been marked 'Working as Intended' and has seen no recent activity. It has been automatically closed for house-keeping purposes.