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

[bnachtweh]

@Aurion72 it's probably due to the fact that you're rendering a separate component with an empty div into you document which has no other effect than injecting Cookiebot. The recommended usage is to either:

• remove the autoConsentBanner option, to let the module load the consent banner automatically (if you're not planning on adding additional settings to the composable, this is the recommended way)
• inject the composable and its consentBanner method directly inside the app.vue component:

// app.vue
<script setup lang="ts">
const { consentBanner } = useCookiebot({ 
  // config here, only if you're planning to override specifics
});

consentBanner();
</script>

<template>
  <div>
    <UContainer>
      <NuxtPage />
    </UContainer>

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

following either of those two solutions would solve your hydration error(s)