Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Adding an empty class throws error with @vueuse/head #15488

Closed
codeflorist opened this issue Nov 16, 2022 · 8 comments
Closed

Adding an empty class throws error with @vueuse/head #15488

codeflorist opened this issue Nov 16, 2022 · 8 comments
Labels
3.x upstream upstream-bug

Comments

@codeflorist
Copy link

codeflorist commented Nov 16, 2022 •
edited

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
@codeflorist
Copy link
Author

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?

@tntsoft
Copy link

tntsoft commented Nov 18, 2022 •
edited

Can confirm it's an issue, can't upgrade to v3.0.0 because of it.

image

It definitely seems to be class related:

image

Unlike @codeflorist, I do not seem to have these errors in RC 13 though.

@SergisGit
Copy link

SergisGit commented Nov 18, 2022 •
edited

I have the same problem with this code:
watchEffect(() => { useHead({ htmlAttrs: { class: props.modelValue ? "overflow" : "" } }); });

But if you specify a non-empty class, then it is never deleted.

@Aksoom-Hussain
Copy link

Aksoom-Hussain commented Nov 20, 2022 •
edited

facing same issue even it not empty, work fine in RC11

useHead({
  bodyAttrs: {
    class: computed(() => {return isNavActive.value ? 'active-navbar-body':'none'})
  },
})
Uncaught (in promise) DOMException: Failed to execute 'add' on 'DOMTokenList': The token provided must not be empty.
    at http://localhost:3000/_nuxt/node_modules/.pnpm/@unhead+vue@1.0.0_vue@3.2.45/node_modules/@unhead/vue/dist/index.mjs?v=ff9f31e7:66:25
    at Array.forEach (<anonymous>)

@dissy123
Copy link

I have the same issue when setting body class to an empty String

<Body :class="{ 'overflow-hidden': !isMobile && isMobile !== undefined }" >

Uncaught (in promise) DOMException: Failed to execute 'add' on 'DOMTokenList': The token provided must not be empty. at http://localhost:3000/_nuxt/node_modules/@unhead/vue/dist/index.mjs?v=492a2091:50:25 at Array.forEach (<anonymous>) at setAttrs (http://localhost:3000/_nuxt/node_modules/@unhead/vue/dist/index.mjs?v=492a2091:41:29) at renderDOMHead (http://localhost:3000/_nuxt/node_modules/@unhead/vue/dist/index.mjs?v=492a2091:126:7)

Can confirm that this workaround helps:

<Body :class="{ 'overflow-hidden': !isMobile && isMobile !== undefined, something: true }" >

It just appears on Body Element, not on others.

@manniL
Copy link
Member

manniL commented Nov 21, 2022

cc @harlan-zw

@harlan-zw
Copy link
Contributor

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/

@harlan-zw
Copy link
Contributor

I have the same problem with this code: watchEffect(() => { useHead({ htmlAttrs: { class: props.modelValue ? "overflow" : "" } }); });

But if you specify a non-empty class, then it is never deleted.

Please avoid wrapping useHead with any sort of watcher, just pass in the reactive input.

useHead({ htmlAttrs: { class: {  overflow: () => props.modelValue } });

@harlan-zw harlan-zw changed the title Failed to execute 'add' on 'DOMTokenList': The token provided must not be empty Adding an empty class throws error with @vueuse/head Nov 22, 2022
@danielroe danielroe added the 3.x label Jan 19, 2023
@danielroe danielroe transferred this issue from nuxt/framework Jan 19, 2023
@sharifzadesina sharifzadesina mentioned this issue Mar 8, 2024
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
3.x upstream upstream-bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
8 participants
@manniL @harlan-zw @tntsoft @dissy123 @Aksoom-Hussain @danielroe @SergisGit @codeflorist