Errors in Vite project

[0xJacky]

Hello, I met some errors when using it in my Vite4 project(Vue3, Typescript).

The version of vue-github-button is 3.1.0.

Here is my code:

<script setup lang="ts">
import GithubButton from 'vue-github-button'

</script>

<template>
    <a-card style="text-align: center" :bordered="false">
        <div>
            <github-button href="https://github.com/ntkme">Follow @ntkme</github-button>
        </div>
    </a-card>
</template>

<style lang="less" scoped>

</style>

[ntkme]

This has to do with TypeScript inferring any Vue ref to be VueProxy<> by default unless its type is explicitly defined.

Since this project is in pure JS. I think a type hint would need to be added: https://www.typescriptlang.org/docs/handbook/jsdoc-supported-types.html

[ntkme]

Can you please try apply this commit https://github.com/buttons/vue-github-button/commit/1389cd2d8f3d58a25c230a55596c9aad904102f2 locally and see if it helps?

[0xJacky]

Thank you for your quick reply. I just apply this commit https://github.com/buttons/vue-github-button/commit/1389cd2d8f3d58a25c230a55596c9aad904102f2, but it still doesn't work.

[0xJacky]

I try to print the $refs._ to console, is undefined.

reset: function () {
      console.log('this.$refs._:', this.$refs._);
      console.log('this.$el.lastChild:', this.$el.lastChild);
      this.$el.replaceChild(/** @type {HTMLAnchorElement} */(this.$refs._), this.$el.lastChild)
}

[ntkme]

$refs._ shouldn't be undefined. - Something in component lifecycle might be broken.

E.g. The ref is defined in render, meaning it should hold reference to the <a> element even before mount.

[0xJacky]

Yes, I think so.

[0xJacky]

I open a pull request to fix this. #22

[ntkme]

I cannot reproduce this on a fresh vite project. Are you using SSR?

[ntkme]

I tried adding button to https://github.com/vitejs/vite-plugin-vue/tree/main/playground/ssr-vue, and also cannot reproduce your issue.

[ntkme]

Is it possible for you to create a repo for a minimum reproduction so that I can take a look?

[0xJacky]

Sure, this is the minimum reproduction: https://github.com/0xJacky/vite-playground.

This problem is strange, I also cannot reproduce this on a fresh vite project.

I found that in src/layout/BaseLayout.vue, if I remove the <transition></transition>, your plugin can work normally.

Maybe check whether $refs._ is defined is the best choice to resolve this issue.

[ntkme]

3.1.2 should fix this.