Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Adding an empty class throws error with @vueuse/head

See original GitHub issue

Environment

Operating System: Linux
Node Version: v16.14.2
Nuxt Version: 3.0.0-rc.14
Nitro Version: 1.0.0
Package Manager: npm@7.17.0
Builder: vite
User Config: -
Runtime Modules: -
Build Modules: -

Reproduction

https://stackblitz.com/edit/nuxt-starter-kn7cz5?file=package.json

Describe the bug

This app.vue:

<script lang="ts" setup>
const bodyClass = ref('');
onMounted(() => {
  window.addEventListener('scroll', (e) => {
    bodyClass.value = window.top.scrollY > 100 ? 'fixed-header' : '';
  });
});
</script>

<template>
  <Body :class="bodyClass" />
  <div style="height: 2000px"></div>
</template>

…throws the following error in console:

index.mjs?v=f97dfb0a:66 Uncaught (in promise) DOMException: Failed to execute 'add' on 'DOMTokenList': The token provided must not be empty.
    at https://nuxt-starter-kn7cz5--3000.local-credentialless.webcontainer.io/_nuxt/node_modules/@unhead/vue/dist/index.mjs?v=f97dfb0a:66:25
    at Array.forEach (<anonymous>)
    at setAttrs (https://nuxt-starter-kn7cz5--3000.local-credentialless.webcontainer.io/_nuxt/node_modules/@unhead/vue/dist/index.mjs?v=f97dfb0a:57:29)
    at renderDOMHead (https://nuxt-starter-kn7cz5--3000.local-credentialless.webcontainer.io/_nuxt/node_modules/@unhead/vue/dist/index.mjs?v=f97dfb0a:142:7)

Furthermore, the class fixed-header gets correctly set when scrolling down, but does not get removed, when scrolling up again.

The problem was introduced in RC12 and persists up to RC14. RC11 does not throw the error and removes the class correctly.

Additional context

No response

Logs

No response

Issue Analytics

State:
Created 10 months ago
Comments:8 (1 by maintainers)

Top GitHub Comments

2reactions

codefloristcommented, Nov 16, 2022

it seems, setting bodyClass to an empty string is the cause of the problem. so this is a workaround:

bodyClass.value = window.top.scrollY > 100 ? 'fixed-header' : 'something';

but what if i do not want a class at all?

1reaction

harlan-zwcommented, Nov 22, 2022

Hey everyone, so this is indeed a bug and a fix is vailable in @vueuse/head 1.0.18.

You can upgrade by deleting lock file / node_modules and re-installing or manually adding this version.

Let me know if you have any issues with that.

Additionally, I’d recommend you switch to the new class API, which would look like this:

useHead({
  class: {
    'overflow-hidden': isMobile
  }
})

<template>
  <Body :class="{ 'overflow-hidden': isMobile }" />
</template>

Similar to the Vue class API. You can also make use of the DOM events API to clean up your code too.

const isFixedHeader = ref(false)
useHead({
  bodyAttrs: {
    onscroll: (e) => { isFixedHeader.value = window.top.scrollY > 100 },
    class: {
      ['fixed-header']: isFixedHeader
    }
  },
})

Please consult the unhead documentation to read more about the new features https://unhead.harlanzw.com/