Can not access process.env properties dynamically

cristiano.moraes

I can’t understand how this can happen but process.env properties can only be accessed statically, not dynamically.

So I created a dummy project and set env property in quasar.config.js like this:

...
 build: {
      vueRouterMode: 'hash', // available values: 'hash', 'history'

      env: {
        VUE_APP_TEST: "THIS IS A TEST",
      },

      extendWebpack (cfg) {
        cfg.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /node_modules/
        })
      },
    }
...

Then I created this simple page:

<template>
  <q-page class="flex flex-center">
      <ul>
      <li>{{ msg1 }}</li>
      <li>{{ msg2 }}</li>
      </ul>
  </q-page>
</template>

<script>
export default {
  name: 'PageIndex',
  data: function () {
    return {
      msg1: "",
      msg2: ""
    }
  },
  mounted() {
    this.msg1 = process.env.VUE_APP_TEST;
    console.log(this.msg1)

    let key = "VUE_APP_TEST";
    this.msg2 = process.env[key];
    console.log(this.msg2); // show undefined
  }
}
</script>

So this.msg1 show correctly THIS IS A TEST but this.msg2 show nothing and console.log return undefined.

My questions are :

There is a way for me to access process.env properties dynamically?
How only dynamic access can be restricted in an object property?

Thanks!

metalsadman

@cristiano-moraes you can’t, you must supply a variable name. https://stackoverflow.com/questions/57057155/why-is-process-env-returning-an-empty-object-while-process-env-prop-returns-the

cristiano.moraes

This post is deleted!

cristiano.moraes

Hi @metalsadman. Thank you for answer my question.

Now I understand this witchcraft. But still, there is something that bugs me. Because this used to work before.

I use a “helper” to access env variables as shown here https://medium.com/carbono/using-env-file-in-quasar-apps-72b56909302f

it is a simple plugin:
‘’’
module.exports = function (key, fallback) {
return process.env[key] || fallback
}
‘’’

So I could have in my template something like:
‘’’
<img class=“logo” :src="$envHelper(‘STATIC_IMAGES_URL’) + ‘/my_logo.png’" />
‘’’

It doesn’t work anymore, but it was working until my last update. Maybe some change in Webpack ?

I guess my best option now is to use mixin, but it kind of kill, at least for me, all point of using process.env.

Oh well. Thank you anyway.

qyloxe

@cristiano-moraes said in Can not access process.env properties dynamically:

It doesn’t work anymore, but it was working until my last update. Maybe some change in Webpack ?

try setting the variable like this:

      env: {
        VUE_APP_TEST: JSON.stringify("THIS IS A TEST"),
      },

ach and maybe another little thing - if you are using this in :src then bear in mind, that there should be no spaces in URLs (convert them to %20 for example).

cristiano.moraes

Hi @qyloxe, thank you for your answer.

Unfortunately, adding JSON.stringify, make no difference to solve this issue. process.env[key] still returns undefined, for the reason Metalsadman explained I guess.

About the URL, it has no space. The problem is that $envHelper(‘STATIC_IMAGES_URL’) + ‘/my_logo.png generates “<my_domain>/undefined/my_logo.png”

Cheers

Hawkeye64

If you are using q/app 2.+ DO NOT stringify it as q/app does that internally. See upgrade guide for more info.

No More Posting New Topics!

Can not access process.env properties dynamically