HTMLElement is not defined on Nuxt (SSR)

[ojvribeiro]

There's an error occorring on Nuxt 3 using this lib on SSR mode.

Minimal reproduction: https://stackblitz.com/edit/nuxt-starter-xtdjhc?file=app.vue

On Stackblitz the error can only be seen on terminal (not breaking the application):

On local and production, this error is shown as an error 500, thus breaking the execution of the app:

---

The current workaround is by wrapping the loop of links with a <ClientOnly> Nuxt component.

<ClientOnly>
  <ul class="flex flex-col gap-4 whitespace-nowrap">
    <li v-for="link in links" :key="link.href">
      <NuxtLink
        :to="`#${link.href}`"
        class="-m-3 p-3 transition-colors"
        :class="[
          isActive(link.href)
            ? 'cursor-default text-primary'
            : 'text-neutral-200 hover:text-neutral-400',
        ]"
      >
        {{ link.label }}
      </NuxtLink>
    </li>
  </ul>
</ClientOnly>

[smastrom]

Hi @ojvribeiro, thank you very much for raising the issue (and providing a reproduction).

I'll be releasing a fix in the next 30 minutes or so. In the meanwhile, you should be able to overcome the issue by using activeId instead of isActive.

<NuxtLink
  :to="`#${link.href}`"
  class="-m-3 p-3 transition-colors"
  :class="[
    activeId === link.href
      ? 'cursor-default text-primary'
      : 'text-neutral-200 hover:text-neutral-400',
  ]"
>
  {{ link.label }}
</NuxtLink>

Thank you again!

[ojvribeiro]

Oh, that was fast 😄

Thanks a lot for the better workaround and the quick response.

[smastrom]

Hi @ojvribeiro, please update to the new version:

pnpm add vue-use-active-scroll@latest

Cheers!