Hello @jeimz173. Have you found a solution to this problem? I am facing the same issue and the above solutions didn’t solve it.

Thank you for your answer @dobbel. I did what you suggested and it is working now.

Hi @metalsadman. Thank you for your answer, I finally have this working.
For the record, what I did was uninstalling everything (node/nvm/yarn) and respective caches and reinstalled everything again. But at this time I started by the nvm as suggested and swapped to node v12. I also, following another tip, installed quasar-cli using npm, once was said it is recommended using this for global packages.

This error is similar to the error mentioned here: https://forum.quasar-framework.org/topic/5063/quasar-upgrade-is-failing-due-to-npm-server-error-on-mac . However, I installed quasar-cli using Yarn and the solution found in the topic is not working for me. Also, quasar info is oddly saying that NPM and Yarn are not installed.
I am using Kubuntu 20.10

cristiano@cristiano-note:~/workspace/teste-blah$ quasar upgrade

  Quasar CLI · Gathering information with yarn...

 @quasar/extras: 1.9.12 → Skipping!
   (⚠️  NPM server returned an error, so we cannot detect latest version)
 quasar: 1.14.7 → Skipping!
   (⚠️  NPM server returned an error, so we cannot detect latest version)
 @quasar/app: 2.1.13 → Skipping!
   (⚠️  NPM server returned an error, so we cannot detect latest version)
  Congrats! All Quasar packages are up to date.

cristiano@cristiano-note:~/workspace/teste-blah$ quasar info

Operating System - Linux(5.8.0-33-generic) - linux/x64
NodeJs - 14.15.3

Global packages
  NPM - 
  yarn - Not installed
  @quasar/cli - 1.1.3
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 1.14.7 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app - 2.1.13 -- Quasar Framework local CLI
  @quasar/extras - 1.9.12 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 2.6.12 -- Reactive, component-oriented view layer for modern web interfaces.
  vue-router - 3.2.0 -- Official router for Vue.js 2
  vuex - 3.6.0 -- state management for Vue.js
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  @babel/core - 7.12.10 -- Babel compiler core.
  webpack - 4.44.2 -- Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.
  webpack-dev-server - 3.11.0 -- Serves a webpack app. Updates the browser on changes.
  workbox-webpack-plugin - Not installed
  register-service-worker - 1.7.1 -- Script for registering service worker, with hooks
  typescript - 3.9.5 -- TypeScript is a language for application scale JavaScript development
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

cristiano@cristiano-note:~/workspace/teste-blah$ yarn --version
1.22.10
cristiano@cristiano-note:~/workspace/teste-blah$ npm --version
6.14.9
cristiano@cristiano-note:~/workspace/teste-blah$ node --version
v14.15.3

My package.json:

{
  "name": "teste-blah",
  "version": "0.0.1",
  "description": "A Quasar Framework app",
  "productName": "Quasar App",
  "author": "Cristiano <cristiano.moraes@gmail.com>",
  "private": true,
  "scripts": {
    "lint": "eslint --ext .js,.vue ./",
    "test": "echo \"No test specified\" && exit 0"
  },
  "dependencies": {
    "@quasar/extras": "^1.0.0",
    "core-js": "^3.6.5",
    "quasar": "^1.0.0"
  },
  "devDependencies": {
    "@quasar/app": "^2.0.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^6.8.0",
    "eslint-config-standard": "^14.1.0",
    "eslint-loader": "^3.0.3",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-node": "^11.0.0",
    "eslint-plugin-promise": "^4.0.1",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-vue": "^6.1.2"
  },
  "browserslist": [
    "last 10 Chrome versions",
    "last 10 Firefox versions",
    "last 4 Edge versions",
    "last 7 Safari versions",
    "last 8 Android versions",
    "last 8 ChromeAndroid versions",
    "last 8 FirefoxAndroid versions",
    "last 10 iOS versions",
    "last 5 Opera versions"
  ],
  "engines": {
    "node": ">= 10.18.1",
    "npm": ">= 6.13.4",
    "yarn": ">= 1.21.1"
  }
}

I tried to reinstall everything, create a new project, delete all node_modules folders. Nothing seems to work. I am running out of ideas. Any suggestions?

Thanks
Cristiano

I am getting the same problem reported here but I used Yarn instead, to install Quasar. Removing yarn.lock file and install yarn again make no difference. Any ideas?

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

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.

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 :

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 solution assumes that always will have a tip indicating that exists more tabs. But it is not always the case. There is already a feature request created to address this issue: https://github.com/quasarframework/quasar/issues/4019

Hello @jeimz173. Have you found a solution to this problem? I am facing the same issue and the above solutions didn’t solve it.

I’d like to have a card with the image on the left and the action links and the text on the right. Is it possible using Q-Card? If not what would be the best approach to do it? Follows a draft of what I am looking for: