Hydration error

[Aurion72]

Hello,

Im trying to use this package but i got an error :

I just installed the module and make a component :

<template>
  <div></div>
</template>

<script setup lang="ts">
  const { consentBanner } = useCookiebot({})
  consentBanner()
</script>

nuxt.config.ts

cookiebot: {
    autoConsentBanner: false,
    cookieBotId: process.env.COOKIEBOT_ID,
  },

[bnachtweh]

Hi @Aurion72, thank you for your issue. Sadly I cannot reproduce your issue. Have you tried removing the module from Nuxt config to see if the problem persists? It seems like the mismatch is more on a templating level. The server renders an HTML comment regarding teleport, while the client renders an empty div?

If the problem only persists when the Cookiebot module is activated, can you please provide me with some more info, like:

• Are you running Nuxt 4 compatibility mode? (future.compatibilityVersion in Nuxt config file)
• Which version of Nuxt Cookiebot are you running?
• Which version of Nuxt are you running?

[Aurion72]

Thanks for your reply.

I've finally found the cause of the problem, it's nuxtUI's component which seems to conflict with your package or CookieBot itselft.

I couldn't say why, but I've wrapped in a and that seems to work.

https://github.com/nuxt/ui/blob/dev/src/runtime/components/overlays/Notifications.vue