`id` is missing or incorrectly configured. Check `runtimeConfig`.

[tmlmt]

Hi @ijkml, thanks for facilitating the integration of Umami in Nuxt 3 :) I can't make the module to work, as I get the error:

[UMAMI]: `id` is missing or incorrectly configured. Check `runtimeConfig`

I'm on Nuxt 3.3.1. Here's my nuxt.config.ts:

export default defineNuxtConfig({
  //...
  extends: ["nuxt-umami"],
  appConfig: {
    umami: {
      host: process.env.NUXT_PUBLIC_UMAMI_HOST,
      id: process.env.NUXT_PUBLIC_UMAMI_ID,
    },
  },
//...
});

and my .env file

NUXT_PUBLIC_UMAMI_HOST="https://stats.<my_website>.com/"
NUXT_PUBLIC_UMAMI_ID="dcc2385c-<rest_of_my_id>-c878a8adb7f0"

I've also tried moving the config to app.config.ts and directly putting my id as a string instead of the ENV variable... same problem.

Could you help me debug this?

Could you also provide like a fake ID and HOST in order to prepare some repro for you if needed?

[ijkml]

Hi, @tmlmt 👋. Terribly sorry, the problem is that you can't use env variables in app.config or appConfig. It's a Nuxt thing.

For now, the only way is to provide the id/host as plain strings. But, I understand the need to keep something like that private, I'd work on that as soon as I get the chance.

[tmlmt]

@ijkml thanks for the quick answer :)

1. Oh ! Thanks for the reminder about env variables in app.config. Any reason why you have developed nuxt-umami like this and not as module, for which env variables can be used?
2. As I was saying in my original message, I also tried using strings (both for host and id) and it doesn't work. Same message ! Any idea?

[ijkml]

1. Well, a few reasons I didn't use module

   • I had this glorious 😅 idea to run the tracker in the server. That is, the front-end calls a Nuxt Server API, the API sends the data to your Umami endpoint. That way everything, your endpoint and credentials remain secret. Afaik, this is possible using Nuxt Layers, but I ran into some trouble with Umami itself. Long story, still working on that.
   • Umami doesn't really treat the website-id as a secret. Once you load Umami, literally anyone can see and copy the id. So, I thought it wasn't that big of an hassle.

2. Currently, no. Everything should work fine if you provided the config like:

   umami: {
   host: "http...",
   id: "id..."
   }

If it doesn't, please prove a repro. HOST: https://ml-umami.netlify.app ID: ba4c9424-c4b7-48df-b66d-4213730673e5

Preview here

[tmlmt]

Alright 😅. I think several modules use the same principle of using an API endpoint, with some minimum config effort in dev. Example: https://sidebase.io/nuxt-auth/configuration/nuxt-auth-handler. Great if you can keep on finding out the best solution :)

The website-id is absolutely not a secret and that's fine, however what is best practice is separating your dev and prod environment, in order not to pollute the prod stats with dev activity. Hence the need for using env variables / secrets.

Here's the most minimal repro you can think of. Used the Nuxt 3 starter from Stackblitz, installed nuxt-umami@next, and put your config in nuxt.config.ts. Same error message. https://stackblitz.com/edit/nuxt-starter-aruxgr?file=package-lock.json

[ijkml]

Thanks for raising this issue. Sorry I couldn't get back to you yesterday, but the issue should be fixed with v2.0.3. If you've got a minute, please update and see if it is resolved.

Also, you can try it online: https://stackblitz.com/edit/nuxt-umami-next

[ijkml]

Yep, best practices. I agree it's something I should work on. Meanwhile, you can use env variables in nuxt.config, so it's totally possible to do something like:

// nuxt.config
const umHost = process.env.NUXT_UMAMI_HOST;
const umId = process.env.NUXT_UMAMI_ID;

//...then

appConfig: {
  umami: { host: umHost, id: umId },
}

[tmlmt]

Hey @ijkml, thanks a lot! Indeed, process.env can be used in nuxt.config.ts, and I confirm things are now working with v2.0.3 :))

[elsell]

@ijkml Is it still possible to set the HOST and ID from environment variables in runtimeConfig as shown in #39? Specifically set via env var when running a built server in production, no SSR.

I'm running nuxt-umami v3.0.2.

I've set up my nuxt.config.ts as shown below, but still get the following error in the browser console (I've verified that the env variables are set correctly):

[UMAMI]: Your API endpoint is missing or incorrectly configured. Check `host` & `customEndpoint` in module config. 
[3qcYbTLZ.js:49:4735](http://localhost:3000/_nuxt/3qcYbTLZ.js)
Object { hostname: "localhost", language: "en-US", screen: "<redacted>", url: "<redacted>", referrer: "", title: "" }
[3qcYbTLZ.js:50:17](http://localhost:3000/_nuxt/3qcYbTLZ.js)

[UMAMI]: `id` is missing or incorrectly configured. Check module config. 
[3qcYbTLZ.js:49:4735](http://localhost:3000/_nuxt/3qcYbTLZ.js)
Object { hostname: "localhost", language: "en-US", screen: "<redacted>", url: "<redacted>", referrer: "", title: "" }

// nuxt.config.ts

...

runtimeConfig: {
  public: {
      umamiHost: process.env.NUXT_PUBLIC_UMAMI_HOST,
      umamiId: process.env.NUXT_PUBLIC_UMAMI_ID,
  }
}

I have other public runtimeConfig that is set from environment variables that works without issue.