dotenv doesn't take console environment variable

[mabujaber]

What happened?

I used quasar-vite application and tried to use dotenv. the .env file loaded normally but when I pass them as console params doesn't take priority.

What did you expect to happen?

as per the vite documentation, it should load as per this docs
https://vitejs.dev/guide/env-and-mode.html

Hence, when we pass the console environment variable should take whatever from there and ignore the .env and so on.

Reproduction URL

https://stackblitz.com/edit/quasarframework-xvjfed?file=.env,src%2Fpages%2FIndexPage.vue,quasar.config.js

How to reproduce?

1. Go to the link
2. Terminate the commandline
3. run this command TEST_CONFIG=FROMCONSOLE quasar dev
4. still what we got is from .env file not from the console

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Quasar CLI Commands/Configuration (@quasar/cli | @quasar/app-webpack | @quasar/app-vite)

Platforms/Browsers

No response

Quasar info output

No response

Relevant log output

No response

Additional context

No response

[yusufkandemir]

You are passing the dotenv result as-is:

build: {
  env: require('dotenv').config().parsed
}

So, if .env file is missing, or you are passing env variables manually (e.g. TEST_CONFIG=FROMCONSOLE quasar dev), they won't be included in require('dotenv').config().parsed. Since you are not handling the other case, it won't work.

Vite documentation about the environment is for Vite applications. Your application is a Quasar CLI with Vite application, so you must refer to Quasar docs for that. Quasar doesn't handle .env files itself, it leaves it to your liking. In this case, you are using a hybrid dotenv and regular env setup, so you must handle it accordingly. Here is how you would do it:

// Env variable names from .env file or process.env.* to safely pass down to the application code
const envVariableNamesToPass = ['TEST_CONFIG']

// Unless you pass `override: true`, this will not override process.env.* but add new stuff to it
const envFromFile = require('dotenv').config().parsed

const envToPass = {}
for (const name of envVariableNamesToPass) {
  // process.env.* contains stuff from regular environment variables
  // and the ones loaded by dotenv (dotenv has less priority by its default behavior)
  envToPass[name] = process.env[name]
}

// You can use ALL variables via process.env in this file(i.e. quasar.config.js),
// but only the ones specified in `envVariableNamesToPass` will be available in your app code(e.g. IndexPage.vue)

// ...
build: {
  env: envToPass
}

[mabujaber]

Now I'm able to get console params but the file configuration is not added.

I think its related to the above foreach

[yusufkandemir]

I don't know if you've read the comments but you should add the variable names you want to pass to the app in envVariableNamesToPass. So, maybe there is an extra value in .env but you want to use it only in quasar.config.js but not pass it to your app. Or, it's a regular env variable that you pass via the terminal, but you don't want it to be accessible from the app.

[mabujaber]

Just a minor changes to fix your foreach

// Env variable names from .env file or process.env.* to safely pass down to the application code
const envVariableNamesToPass = ['TEST_CONFIG']

// Unless you pass `override: true`, this will not override process.env.*
const envFromFile = require('dotenv').config().parsed

const envToPass = {}
for (const name of Object.keys(envFromFile)) {
  envToPass[name] = process.env[name] ?? envFromFile[name]
}

// You can use ALL variables via process.env in this file(i.e. quasar.config.js),
// but only the ones specified in `envVariableNamesToPass` will be available in your app code(e.g. IndexPage.vue)

// ...
build: {
  env: envToPass
}

[yusufkandemir]

Please send your quasar.config.js and your .env file.

[mabujaber]

I will share, but just take a look at the foreach will only make envVariableNamesToPass available

[mabujaber]

/* eslint-env node */

/*
 * This file runs in a Node context (it's NOT transpiled by Babel), so use only
 * the ES6 features that are supported by your Node version. https://node.green/
 */

// Configuration for your app
// https://v2.quasar.dev/quasar-cli-vite/quasar-config-js

const { configure } = require('quasar/wrappers')
const path = require('path')

module.exports = configure(function (ctx) {

  // Env variable names from .env file or process.env.* to safely pass down to the application code
  const envVariableNamesToPass = ['GOOGLE_MAP_API_KEY']

  // Unless you pass `override: true`, this will not override process.env.*
  const envFromFile = require('dotenv').config().parsed

  const envToPass = {}
  for (const name of envVariableNamesToPass) {
    envToPass[name] = process.env[name] ?? envFromFile[name]
  }

  return {
    supportTS: true,
    eslint: {
      // fix: true,
      // include = [],
      // exclude = [],
      // rawOptions = {},
      warnings: true,
      errors: true,
    },

    // https://v2.quasar.dev/quasar-cli-vite/prefetch-feature
    // preFetch: true,

    // app boot file (/src/boot)
    // --> boot files are part of "main.js"
    // https://v2.quasar.dev/quasar-cli-vite/boot-files
    boot: [
      'i18n',
      'axios',
      'sentry',
      { server: true, client: true, path: 'everywhere' },
      {
        server: true,
        client: false,
        path: 'server',
      },
    ],

    // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css

    // https://github.com/quasarframework/quasar/tree/dev/extras
    extras: [

      'material-icons', // optional, you are not bound to it
    ],

    // Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#build
    build: {
      rtl: true,
      target: {
        browser: ['es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1'],
        node: 'node16',
      },

      env: envToPass,

      vueRouterMode: 'hash', // available values: 'hash', 'history'

      chainWebpack: chain => {
        chain.module
        .rule('i18n-resource')
        .test(/\.(json5?|ya?ml)$/)
        .include.add(path.resolve(__dirname, './src/i18n'))
        .end()
        .type('javascript/auto')
        .use('i18n-resource')
        .loader('@intlify/vue-i18n-loader')
        chain.module
        .rule('i18n')
        .resourceQuery(/blockType=i18n/)
        .type('javascript/auto')
        .use('i18n')
        .loader('@intlify/vue-i18n-loader')
      }
    },

    // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#framework
    framework: {
      all: 'auto',
      cssAddon: true,
      config: {},

      plugins: ['Meta', 'Notify', 'LocalStorage', 'SessionStorage'],
    },

    animations: 'all', // --- includes all animations
    // https://v2.quasar.dev/options/animations
    animations: [],



    // https://v2.quasar.dev/quasar-cli-vite/developing-ssr/configuring-ssr
    ssr: {
      ssrPwaHtmlFilename: 'offline.html', // do NOT use index.html as name!
      // will mess up SSR

      pwa: false,

      // manualStoreHydration: true,
      // manualPostHydrationTrigger: true,
      prodPort: 80, // The default port that the production server should use
      // (gets superseded if process.env.PORT is specified at runtime)
      maxAge: 1000 * 60 * 60 * 24 * 30,

      middlewares: [
        'api',
        'render', // keep this as last one
      ],
    },

    // https://v2.quasar.dev/quasar-cli-vite/developing-pwa/configuring-pwa
    pwa: {
      workboxMode: 'generateSW', // or 'injectManifest'
      injectPwaMetaTags: true,
      swFilename: 'sw.js',
      manifestFilename: 'manifest.json',
      useCredentialsForManifestTag: false,
    },

    cordova: {
      // noIosLegacyBuildFlag: true, // uncomment only if you know what you are doing
    },

    // Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-capacitor-apps/configuring-capacitor
    capacitor: {
      hideSplashscreen: true,
    },

    // Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-electron-apps/configuring-electron
    electron: {
      // extendElectronMainConf (esbuildConf)
      // extendElectronPreloadConf (esbuildConf)

      inspectPort: 5858,

      bundler: 'packager', // 'packager' or 'builder'

      packager: {
        // https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options
        // OS X / Mac App Store
        // appBundleId: '',
        // appCategoryType: '',
        // osxSign: '',
        // protocol: 'myapp://path',
        // Windows only
        // win32metadata: { ... }
      },

      builder: {
        // https://www.electron.build/configuration/configuration

        appId: 'sygma',
      },
    },

    // Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-browser-extensions/configuring-bex
    bex: {
      contentScripts: ['my-content-script'],

      // extendBexScriptsConf (esbuildConf) {}
      // extendBexManifestJson (json) {}
    },
  }
  // console.log(`prrrr ${process.env}`)
})

[yusufkandemir]

I will share, but just take a look at the foreach will only make envVariableNamesToPass available

That's exactly what it is supposed to do.

You just have to specify the variable names that would want to whitelist in envVariableNamesToPass. Otherwise, by mistake, you could leave a secret key or similar in the frontend code. This is also why the whole process.env is not made available to the app code by default.

[mabujaber]

Thanks alot Yusuf