[Bug]: Popper components throwing error on SSR

[MahediAmin]

Environment

Developement/Production OS: Windows 10 19043.1110
Node version: 16.0.0
Package manager: pnpm@8.6.0
Radix Vue version: 1.0.0
Shadcn Vue version: 1.0.0
Vue version: 3.0.0
Nuxt version: 3.0.0
Nuxt mode: universal
Nuxt target: server
CSS framework: tailwindcss@3.3.3
Client OS: Windows 10 19043.1110
Browser: Chrome 90.0.4430.212

Link to minimal reproduction

https://www.shadcn-vue.com/docs/components/tooltip.html

Steps to reproduce

Describe the bug

when i use tooltip into my nuxt project

get this error.

if i use redix-tooltip directly there is no error

Expected behavior

No response

Conext & Screenshots (if applicable)

No response

[zernonia]

Thanks @MahediAmin . I've noticed this few days ago, and it fix has been pushed on website 😁

[BayBreezy]

Hey @zernonia , I noticed this error with a few of the triggers. Was it update for all of them or just for the Tooltip?

[zernonia]

@BayBreezy could you point me to which triggers are causing similar issue? I updated a few.. and will look into the real problem today

[BayBreezy]

@BayBreezy could you point me to which triggers are causing similar issue? I updated a few.. and will look into the real problem today

@zernonia , I removed the client-only tag from all the Radix-vue components and I no longer get the warning/error. Thanks for fixing this. If anything comes up, I will be sure to let you know

[zernonia]

Thanks for that @BayBreezy ! 😁

[BayBreezy]

Hey @zernonia , I am getting the error with the Tooltip trigger component. If not wrapped in the client-only tag, I get all sorts of hydration warnings and it causes the child of the trigger to be duplicated.

[zernonia]

hmmm.. @BayBreezy Im not seeing that.. Could you provide some screenshot or minimal repro?

[BayBreezy]

Sure @zernonia , here is the stackblitz: https://stackblitz.com/edit/nuxt-starter-ws3qeq?file=pages%2Findex.vue

I added 2 buttons that are triggers for tooltips. Check the console and you will see the issue with the one not wrapped in the client-only tag

[zernonia]

@BayBreezy you should add asChild props to trigger when you use another button.

eg: wrapping native button inside another button would render hydration error by default.

<button>
    <button>Test</button>
</button>

So, in your code, add asChild as such

<UITooltipTrigger asChild>
  <UIButton variant="outline">
    <Icon class="h-5 w-5" name="solar:moon-fog-bold-duotone" /> Does
    not work on init load
  </UIButton>
</UITooltipTrigger>

[BayBreezy]

Ohhhhhhh. My fault. Thank you

[zernonia]

No problem. You are welcome! 😁

[BayBreezy]

@zernonia , So adding asChild removed the hydration error, but I still get this error when I hover over it. Uncaught (in promise) TypeError: n.getBoundingClientRect is not a function

[zernonia]

@BayBreezy the fixes is in 0.2.3

[BayBreezy]

Oh.. The website is saying that 0.2.2 is the latest. Another oversight on my part. Thank you. It is working as intended now.