Dynamic runtime public environment variables using publicRuntimeConfig are undefined

[Sletheren]

The issue:

I am trying to achieve this requirement:

• The application is built using some environment variables that are defined on Build-time (like BasePath)
• The application can access some envs that are Runtime, like API_URL

I am building my application for production nuxt build --production=true and running it on a docker container where I pass some environment variables e.g API_URL, ...etc

My nuxt.config.js has the definition of those env variables:

  publicRuntimeConfig: {
    TENANT: process.env.TENANT,
    API_URL: process.env.API_URL,
  },

I run my docker with the built-image:

   docker run -p 3000:3000 -e TENANT=GB -e API_URL=.... my_image_name

And I access those variables using the $config property in Vue:

mounted () {
   console.log(this.$config.TENANT) //undefined
   console.log(process.env.TENANT) //undefined
}

What is Expected?

The expected behaviour is whenever I run my_image_name with different by passing different env variables, I can see those values.

What is actually happening?

All the publicRuntimeConfig are undefined on run time!

Note:

Running it locally works fine, because the env variables are read from .env file, which doesn't exist on production, but rather the env variables...

Versions

• nuxt: v2.15.3
• node: v12.14.0

[danielroe]

@Sletheren Could you provide a reproduction? 🙏

Here is an example of Nuxt correctly reading an environment variable at runtime that does not exist in .env.

[Sletheren]

Hi @danielroe , here is a reproduction of the issue: https://github.com/Sletheren/nuxt-typescript-envs
I prepared the scripts for you so you can see it in action, please check the README file,
Thanks!

[danielroe]

@Sletheren Thanks. The issue is that you aren't copying your nuxt.config into your Docker image, so there's no runtime configuration at all. (It will also likely cause other issues.)

https://github.com/Sletheren/nuxt-typescript-envs/blob/d124dc6959e2acb424ce8f4668c9c9321059450a/scripts/prepare_package#L1-L5

[Sletheren]

Seems like copying nuxt.config.js got me somewhere, but still, i cannot access the environment variables from files that aren't .vue or vuex methods, is this a known thing?

[danielroe]

@Sletheren Great - glad that's working!

In terms of accessing process.env.* within your app, this is deliberate. Read more about exposing your environment variables here. If you're using runtimeConfig (which allows for truly dynamic variables) you won't be able to access them from process.env but instead through $config (which is available from the Nuxt context).

(If you still think something's off, just ping me and I'll reopen the issue.)

[Sletheren]

Hi @danielroe , thanks for the time and thorough explanation!
However, I cannot see the feasibility of accessing the context/$config object, outside Vue files / VueX methods / plugins / mIddlewares,
My need is to access the Dynamic env variables (aka, runtime env var from a js file in the application.
when we were using Vue with SSR, we were injecting the env variables into the Window object, and therefore, they can be accessible client-side throughout the application,
And was wondering what is the Nuxt way to do that without the manual injection part or accessing window.__NUXT__.config directly

[Sletheren]

@danielroe also, I have some settings on my nuxt.config.js where I use runtime env vars, meaning that on build time those envs are undefined which create for me undesired behaviour,
Is it possible to use runtime environment variables in the config, lets say in the head / i18n / googleAnalytics settings inside nuxt.config.js ?

[bangrobe]

I have similar problem with publicRuntimeConfig. It always return undefined although I followed exactly the documentation.
My config are:

env: {
BASE_URL: <my-base-url, currently just localhost>
API_URL:
GRAPHQL_HTTP:
},
publicRuntimeConfig: {
baseURL: process.env.BASE_URL,
apiURL: process.env.API_URL
graphqlURL: process.env.GRAPHQL_HTTP
},
apollo: {
clientConfigs: {
default: {
httpEndpoint: this.$config.graphqlURL
}
}
}
It always return undefined when I try to access (this.$config), and another problem are "TypeError: Cannot read property 'resolved' of undefined".

[danielroe]

@bangrobe You can't access this.$config within your nuxt.config. It's for use within your app itself. In the case you have, @nuxtjs/apollo would also have to have support for publicRuntimeConfig (note: I'm not sure it does), and you would need to declare it like so:

apollo: {
  clientConfigs: {
    default: {
      httpEndpoint: process.env.GRAPHQL_HTTP
    }
  }
}

[bangrobe]

@danielroe When I use this.$config in my app, It will show undefined if I don't hardcoded the url in publicRuntimeConfig.
And your declare will throw an fatal error:
` Nuxt Fatal Error

TypeError: [Apollo module] Client configuration "default" must define httpEndpoint or link option.`

[danielroe]

@bangrobe You might find this blog article helpful in terms of using runtimeConfig. For @nuxtjs/apollo, it's possible to use runtimeConfig: see this comment.

[bangrobe]

@danielroe Yes, I tried both of them today. Took me 5 hours to test all possible combinations. And there are many type of errors happened. Example with graphql declare sometimes I will get ""TypeError: Cannot read property 'resolved' of undefined"."
Sometimes the API link will insert "undefined" inside the url. Well, many "undefined" appeared. LOL

[woile]

I'm having this very same issue reported at the beginning. I have a k8s pod which mounts a .env file, but the system is not able to read it. I was setting the API_URL, but I was not able to make it work. Locally works well.
I'm gonna set the configuration on build time.

[StefanoTesla]

same issue here:

nuxt.config.js:
publicRuntimeConfig: { baseURL: process.env.BASE_URL || 'https://stefanotesla.it' },

app.vue:

${this.$config.baseUrl} return undefined

any help?

[danielroe]

@StefanoTesla If you could creata new issue with a reproduction, I'll have a look 🙂

[kirtan403]

@StefanoTesla Looks like a typo? baseUrl vs baseURL

[git-xbits]

Have any chance to disable this option to nuxt change process.env.* to "hardcoded" value? for any runtime get new value?

[AdamAffou]

Same issue.

My problem was that i changed everything in my nuxt app to use es module instead of commonjs require.

So i used a workaround :

Instead of exporting to default the nuxt config i exported a function that uses process.env as parameter :
//nuxt.config.js

export default function getNuxtConfig (envVariables) {
  return {
 //Nuxt config
    publicRuntimeConfig: {
      HOST: envVariables.HOST,
      PROTOCOL: envVariables.PROTOCOL,
      PORT: envVariables.PORT,
    etc...
    },
 }
}

And then in server/index.js :

import getNuxtConfig from '../nuxt.config.js' 
// Import and Set Nuxt.js options
const config = getNuxtConfig(process.env)
 const nuxt = new Nuxt(config)

Hope it helps

[mc316]

I got it working by deleting the dist folder or the .nuxt folder.

In my nuxt.config.js

  publicRuntimeConfig: {
    baseURL: process.env.BASE_URL
  },

and testing in pages/index.vue

    mounted() {
        console.log(this.$config.baseURL)
    }

[devzom]

There's some trick to try: nuxt-modules/apollo#258 (comment)

[hakimov-dev]

All env variables in Nuxt.js must start with NUXT_ENV.