No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Unable to access environment variables with square bracket notation

    Help
    2
    11
    998
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • beets
      beets @jvik last edited by

      @jvik I think it may have to do with this PR: https://github.com/quasarframework/quasar/pull/8084

      Maybe try in quasar.conf.js under build:

      build: {
        env: Object.entries(process.env).reduce((acc, [key,val]) => {
          if(key.startsWith('VUE_APP')) {
            acc[key] = val
          }
          return acc
        }, {})
      }
      
      

      I typed this directly into the forum, so it’s not tested.

      J 1 Reply Last reply Reply Quote 0
      • J
        jvik @beets last edited by

        @beets Hmmm. Doesn’t seem like it made any difference unfortunately.

        beets 1 Reply Last reply Reply Quote 0
        • beets
          beets @jvik last edited by

          @jvik Maybe you need if(key.startsWith('VUE_APP') || key.startsWith('$VUE_APP')) { instead?

          Can you try putting:

          const tmp = Object.entries(process.env).reduce((acc, [key,val]) => {
            if(key.startsWith('VUE_APP') || key.startsWith('$VUE_APP')) {
              acc[key] = val
            }
            return acc
          }, {})
          console.log('ENV VARS:', tmp)
          
          

          at the top of quasar.conf.js and see what the output on the command line is during a quasar dev or quasar build

          J 1 Reply Last reply Reply Quote 1
          • J
            jvik @beets last edited by jvik

            @beets This is the output from the console.log

            ENV VARS: 
            {}
            ​
            <prototype>: Object { … }
            configuration.ts:11
            

            So just an empty object

            beets 1 Reply Last reply Reply Quote 0
            • beets
              beets @jvik last edited by

              @jvik hm, and if you just put

              console.log(process.env)
              

              at the top of quasar.conf.js, do you see any variables starting with VUE_APP ?

              J 2 Replies Last reply Reply Quote 0
              • J
                jvik @beets last edited by

                @beets Forget my last comment. I added the snippet to the wrong file.

                When adding it to my quasar.conf.js it outputs this ENV VARS: { VUE_APP_BACKEND: 'localhost:3020' }, so that part seems to work.

                Still, with the snippet from your first comment, I am not able to make it work.

                1 Reply Last reply Reply Quote 0
                • J
                  jvik @beets last edited by jvik

                  @beets

                  Shouldn’t the following: foo: "bar" under build in quasar.conf.js make me able to console.log(process.env.foo) in my quasar plugin and get “bar”?

                  It does just output undefined as well.

                  beets 1 Reply Last reply Reply Quote 0
                  • beets
                    beets @jvik last edited by

                    @jvik It should be

                    build: {
                      env: {
                        foo: "bar"
                      }
                    }
                    

                    but yes, that should make it available in your vue files / plugins. Let me know if that isn’t working.

                    J 1 Reply Last reply Reply Quote 0
                    • J
                      jvik @beets last edited by jvik

                      @beets Okay, yeah. That works as expected, but I’m still not able to dynamically get my environment variables.

                      Even if I define like below inside quasar.conf.js if I console.log(process.env) somewhere else in the project it will still be an empty object.

                      build: {
                        env: {
                          foo: "bar"
                        }
                      }
                      

                      Edit: I put it all inside a child property. THat seems to solve it:

                      build: {
                          vueRouterMode: 'history', // available values: 'hash', 'history',
                          env: {
                              props: Object.entries(process.env).reduce((acc, [key, val]) => {
                                  if (key.startsWith('VUE_APP')) {
                                      acc[key] = val;
                                  }
                                  return acc;
                              }, {}),
                          },
                      }
                      
                      beets 1 Reply Last reply Reply Quote 0
                      • beets
                        beets @jvik last edited by

                        @jvik If your edited solution works, then great. It’s was a security improvement by quasar in a recent version so ENV vars aren’t bundled without being explicitly defined, which is a good thing, but would cause using the square brackets to have some issues.

                        You could also stringify the object into json if you’re still having problems:

                        build: {
                            vueRouterMode: 'history', // available values: 'hash', 'history',
                            env: {
                                props: JSON.stringify(Object.entries(process.env).reduce((acc, [key, val]) => {
                                    if (key.startsWith('VUE_APP')) {
                                        acc[key] = val;
                                    }
                                    return acc;
                                }, {})),
                            },
                        }
                        

                        And in a boot file :

                        export default async ({ Vue }) => {
                          Vue.prototype.$env = JSON.parse(process.env.props)
                        }
                        

                        And then access it as this.$env[some_var]

                        1 Reply Last reply Reply Quote 0
                        • First post
                          Last post