Uncaught TypeError: t.languages is undefined

[yayitazale]

Hi:

I have installed the plugin doing:

npx astro add @jop-software/astro-cookieconsent

Then npm install to install dependencies

I can see vanilla-cookieconsent node-module installed.

My integration in astro.config.mjs looks like this:

import image from "@astrojs/image";
import mdx from "@astrojs/mdx";
import react from "@astrojs/react";
import sitemap from "@astrojs/sitemap";
import tailwind from "@astrojs/tailwind";
import { defineConfig } from "astro/config";
import config from "./src/config/config.json";
import jopSoftwarecookieconsent from "@jop-software/astro-cookieconsent";
...

export default defineConfig({
...
integrations: [
...
jopSoftwarecookieconsent({
    guiOptions: {
      consentModal: {
        layout: "box inline",
        position: "bottom right",
        equalWeightButtons: false,
        flipButtons: false
      },
      preferencesModal: {
        layout: "box",
        position: "right",
        equalWeightButtons: false,
        flipButtons: true
      }
    },
    categories: {
      necessary: {
        readOnly: true
      },
      analytics: {}
    },
    language: {
      default: 'es',

      translations: {
      es: {
        consentModal: {
            label: "Cookie Consent",
            title: "Hola viajero, es la hora de las galletas!",
            description: "Esta página utiliza cookies de análisis de terceros para mejorar tu experiencia de uso y medir las estadísticas de navegación.",
            acceptAllBtn: "Aceptar todo",
            acceptNecessaryBtn: "Rechazar todo",
            showPreferencesBtn: "Gestionar preferencias",
            footer: "<a href=\"/privacy-policy\">Política de privacidad</a>"
        },
        preferencesModal: {
            title: "Preferencias de Consentimiento",
            closeIconLabel: "Cerrar",
            acceptAllBtn: "Aceptar todo",
            acceptNecessaryBtn: "Rechazar todo",
            savePreferencesBtn: "Guardar preferencias",
            serviceCounterLabel: "Servicios",
            sections: [
                {
                    title: "Uso de Cookies",
                    description: "Esta página web utiliza Matomo, un servicio de analítica web, que permite la medición y análisis de la navegación en las páginas web. En su navegador podrá observar cookies de este servicio. Según la tipología anterior se trata de cookies propias, de sesión y de análisis."
                },
                {
                    title: "Cookies Analíticas",
                    description: "A través de la analítica web se obtiene información relativa al número de usuarios que acceden a la web, el número de páginas vistas, la frecuencia y repetición de las visitas, su duración, el navegador utilizado, el operador que presta el servicio, el idioma, el terminal que utiliza y la ciudad a la que está asignada su dirección IP. Información que posibilita un mejor y más apropiado servicio por parte de este portal.",
                    linkedCategory: "analytics"
                },
                {
                    title: "Más información",
                    description: "Para más información visite nuestro página de <a href=\"/privacy-policy\">Política de privacidad</a>"
                }
            ]
        }
      }
      }
    },
    disablePageInteraction: false
  })]
});

However if I do a npm run dev to preview the page the consent modal is not showing up and I see this error in the console:

Uncaught TypeError: t.languages is undefined
    un cookieconsent.js:7
    run cookieconsent.js:7
    run cookieconsent.js:7
    <anonymous> page.js:5

What I'm doing wrong?

Thanks!

[cngJo]

Hi @yayitazale!

On first sight, it seems like you're using a configuration from the upcoming v3 of vanilla-cookieconsent. This integration currently only supports version ^2.9.1 (so the 2.x branch) since version 3 is not stable yet.

Can you check in your installation, which version of vanilla-cookieconsent you're using - just to be sure, you're on v2.

npm list vanilla-cookieconsent

(see this stackoverflow answer for more information about npm list)

Version 3 and Version 2 of vanilla-cookieconsent seem to be not compatible on a config level.

---

I'll check the next days, if I can just raise the dependency on vanilla-cookieconsent to also allow v3.0.0-rc.x versions.

For now, you can try changing your configuration to be compatible with version 2, which is documented in the README.md of orestbida/cookieconsent.

[yayitazale]

Hi @yayitazale!

On first sight, it seems like you're using a configuration from the upcoming v3 of vanilla-cookieconsent. This integration currently only supports version ^2.9.1 (so the 2.x branch) since version 3 is not stable yet.

Can you check in your installation, which version of vanilla-cookieconsent you're using - just to be sure, you're on v2.

npm list vanilla-cookieconsent

(see this stackoverflow answer for more information about npm list)

Version 3 and Version 2 of vanilla-cookieconsent seem to be not compatible on a config level.

I'll check the next days, if I can just raise the dependency on vanilla-cookieconsent to also allow v3.0.0-rc.x versions.

For now, you can try changing your configuration to be compatible with version 2, which is documented in the README.md of orestbida/cookieconsent.

Thank you, I wasn't aware of this. I was using the stackblitz.com for v3 (https://stackblitz.com/edit/vue-c5tqpr?file=src%2Fplugins%2Fcookieconsent-config.js)

Sorry for that, now it is working.

Thanks!