[PostHog.js] PostHog was initialized without a token. This likely indicates a misconfiguration.

[steveclarke]

I've just installed this module and got it working on my development environment. Pageviews, custom events, session recordings, etc. are all working.

Next, I deployed to my staging environment and I get the following console log error when the app loads:

[PostHog.js] PostHog was initialized without a token. This likely indicates a misconfiguration. Please check the first argument passed to posthog.init()

I've confirmed that the same environment variables I used in development are configured on the staging server.

POSTHOG_API_KEY="secret"
POSTHOG_API_HOST="https://us.i.posthog.com"

When I run env on the staging server I see that the environment variables are active.

I tried directly configuring the posthog node in the nuxt.config.ts file:

  posthog: {
    publicKey: process.env.POSTHOG_API_KEY,
    host: process.env.POSTHOG_API_HOST
  }

But that doesn't work on staging either.

Are there any other options I can try?

[mitjans]

I am not able to reproduce this problem in local. Providing both variables using only the environment works.
Have you made sure that your staging application has access to the correct environment?

[steveclarke]

I'm using a Docker container for my Nuxt frontend. I've confirmed the running docker container contains the environment variables:

deploy@staging:~/docker/app$ docker compose exec frontend bash
root@f8a5f662f588:/app# env
HOSTNAME=f8a5f662f588
POSTHOG_API_HOST=https://us.i.posthog.com
YARN_VERSION=1.22.22
PWD=/app
PORT=80
NODE_ENV=production
HOME=/root
NUXT_PUBLIC_MAINTENANCE_MODE=false
POSTHOG_API_KEY=**secret**
TERM=xterm
HOST=0.0.0.0
SHLVL=1
NUXT_API_BASE_URL=http://backend:3000/api/v1
PATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin
NODE_VERSION=22.13.0
_=/usr/bin/env
root@f8a5f662f588:/app#

I'm a bit confused at the use of the use of non-prefixed env vars. i.e. I would have thought I'd have to use NUXT_POSTHOG_API_KEY instead of POSTHOG_API_KEY.

This makes me wonder if the POSTHOG_API_KEY is injected at the time that the container is built on my development machine and not at runtime?

[mitjans]

The Posthog variables are picked up at build time, not runtime. That's probably why you are facing this issue.
Can you try building with the env variables set up before deploying on Docker? Let me know if it works.

[steveclarke]

Yes this is definitely the issue. When I added the env vars to my Dockerfile, where the app is built, and pushed to my staging environment it worked.

This seems to defeat the purpose of using Nuxt though. This is my first Nuxt project but I have many plain Vue projects deployed. I'm used to the difficulty of trying to use runtime environment variables in the production build. But Nuxt allows us to read environment variables at runtime.

I feel like it would be a good idea for this library to take advantage of Nuxt 3's runtime environment by making use of useRuntimeConfig in the module.ts file.

I'm willing to help convert it to using runtime if you want. It looks like somewhere around line 74 in module.ts is where the initialization using the env vars happens.

[andrei-vintila]

Gave it a try here but didn't have time to test. I also noticed the same issue but in Cloudflare deployemt with Nuxt hub, didn't pick the variables at build time.