Failed to execute 'add' on 'DOMTokenList': The token provided must not be empty

Open codeflorist opened this issue 3 years ago • 3 comments

Environment

Operating System: Linux
Node Version: v16.14.2
Nuxt Version: 3.0.0-rc.14
Nitro Version: 1.0.0
Package Manager: [email protected]
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

Nov 16 '22 13:11 codeflorist