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

[steveclarke]

trafficstars

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.

[vicentematus]

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.

@steveclarke do you have a reference on how you set it up? I'm having problems too setting up nuxt-posthog on Google Cloud Run. I'm having the same issue of the missing token (which probably it's because of runtime / build time differences).

[steveclarke]

@steveclarke do you have a reference on how you set it up? I'm having problems too setting up nuxt-posthog on Google Cloud Run. I'm having the same issue of the missing token (which probably it's because of runtime / build time differences).

Since I'm building the app inside my Docker container, the environment variables that I have in my local .env file that are read when I build the Nuxt app locally are not available in the build environment.

I have to pass the POSTHOG_API_KEY and POSTHOG_API_HOST in as --build-arg params to the docker build. Here's my Dockerfile for reference:

ARG NODE_VERSION=22.13.0

#############################################################################
# WORKAROUND: PostHog Environment Variable Build-time Requirements
# ----------------------------------------------------------------
# The following ARGs and ENVs are needed because nuxt-posthog library requires
# these environment variables during the build process, rather than accessing
# them at runtime via Nuxt's useRuntimeConfig.
#
# During the Nuxt build process, these variables are compiled directly into
# the generated JavaScript files, which means they become "baked into" the 
# static assets. This is why they need to be available at build time.
#
# This approach is necessary until the library is updated to properly use
# Nuxt's runtime configuration system.
#
# See issue: https://github.com/mitjans/nuxt-posthog/issues/69
#
# NOTE: Since these variables are baked into the image at build time, the same
# PostHog configuration is used in both staging and production environments.
# This is acceptable for our use case since PostHog is primarily for internal
# monitoring, while Google Analytics serves as our primary analytics tool.
#############################################################################
ARG POSTHOG_API_KEY
ARG POSTHOG_API_HOST

# Build stage
FROM node:${NODE_VERSION}-slim AS build

# Important: Re-declare ARGs after FROM statement to make them available in this build stage
ARG POSTHOG_API_KEY
ARG POSTHOG_API_HOST

# Enable pnpm
ENV PNPM_HOME="/pnpm"
ENV PATH="${PNPM_HOME}/bin:$PATH"
ENV POSTHOG_API_KEY=${POSTHOG_API_KEY}
ENV POSTHOG_API_HOST=${POSTHOG_API_HOST}

# Print PostHog environment variables for verification
RUN echo "PostHog Environment Variables:" && \
    echo "POSTHOG_API_KEY length: ${#POSTHOG_API_KEY} characters" && \
    echo "POSTHOG_API_HOST: ${POSTHOG_API_HOST}"

# RUN corepack enable
# Ensure latest corepack is installed because there are/were issues when pnpm
# version 10 released.
# https://github.com/pnpm/pnpm/issues/9029#issuecomment-2631400936
RUN corepack enable && npm install -g corepack@latest

WORKDIR /app

# Copy package.json and pnpm-lock.yaml to the working directory
COPY ./package.json /app/
COPY ./pnpm-lock.yaml /app/

# Install dependencies
RUN pnpm install --shamefully-hoist

# Copy the rest of the files
COPY . ./

# Build the app
RUN pnpm run build

# Production stage
FROM node:${NODE_VERSION}-slim

WORKDIR /app

# Copy the build files from the build stage
COPY --from=build /app/.output ./

# Environment variables
ENV HOST=0.0.0.0 
ENV PORT=80
ENV NODE_ENV=production

# Expose the port
EXPOSE 80

# Start the app
CMD ["node", "/app/server/index.mjs"]

Then in my docker-build script I have the following:

log "Building ${base_tag_with_version}"
docker build --pull \
  --build-arg POSTHOG_API_KEY="${POSTHOG_API_KEY:-}" \
  --build-arg POSTHOG_API_HOST="${POSTHOG_API_HOST:-}" \
  -t "${base_tag_with_version}" "$@" .

(The script actually reads the environment variables from my local .env file and passes them to the Docker build but you can simply substitute in the actual Posthog env vars).

I'm not sure how this translates to the Google Cloud Run platform, but you need to figure out where your Nuxt app is actually being built in the deployment lifecycle (i.e. where is pnpm run build being called?) and ensure that the environment variables are available there.

[vicentematus]

Thank you @steveclarke. Yeah, the timing of when npm run build runs to grab the enviroment variables is confusing, I'm not too familiarized with Cloud Run.

[nightwiing]

Having the same issue. My setup is simple in vercel where I have put up my env variables, it works in local but not in production. Please let me know if anyone find solution please let me know @steveclarke

[davidstackio]

EDIT: my issue was related to an upstream nuxt layer of mine.

To be more "Nuxt-like" this module should use the standard NUXT_PUBLIC_ prefix for the environment variables so they can be automatically picked up during development, build and generate. Even just mentioning this in the docs would be helpful.

From the Nuxt docs:

Since the module is already using runtime config public, you should just be able to use NUXT_PUBLIC_POSTHOG_PUBLIC_KEY in your .env file, as long as you also set this module's config to an empty string (for security, nuxt requires something to be set before using an environment variable).