Can not access process.env properties dynamically



  • 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.

    6923d96e-8eb1-4f5b-8c87-f7e413f99991-image.png

    My questions are :

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

    Thanks!





  • This post is deleted!


  • 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.



  • @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).



  • 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



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


Log in to reply