.env variables are read only when quasar.config.js is changed

[ulorenas]

What happened?

Tried to migrate project from vite-plugin to app-vite and according to docs .env file support should work out of the box. However quasar dev command loads variables from .env files only when it detects quasar.config.js file changes.

What did you expect to happen?

quasar dev should always load variables from .env files, regardles of whether quasar.config.js change detected.

Reproduction URL

https://stackblitz.com/edit/quasarframework-stackblitz-templates-6bp4rxwv?file=quasar.config.js

How to reproduce?

Only two files are changed in the repro project, there is new .env file with X_CUSTOM_ENV variable and in quasar.config.js I added console.log to print all loaded environment variables.

To reproduce:

1. Open URL
2. Wait for dependencies to install
3. Stop running command
4. Run pnpm dev
5. You will see all environment variables printed out, but X_CUSTOM_ENV is not to be found
   
6. Change quasar.config.js file
7. Development server will automatically be reloaded due to changes in quasar.config.js, after reload you will see the new variable
   

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

quasar info

Operating System - Linux(5.0 (Windows)) - linux/x64
NodeJs - 18.20.3

Global packages
  NPM - 10.2.3
  yarn - 1.22.19
  pnpm - 8.15.6
  bun - Not installed
  @quasar/cli - undefined
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.17.7 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 2.1.0 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.16.17 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.5.13 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.5.0
  pinia - Not installed
  vite - 6.1.1 -- Native-ESM powered web dev build tool
  vite-plugin-checker - Not installed
  eslint - 9.21.0 -- An AST-based pattern checker for JavaScript.
  esbuild - 0.24.2 -- The cross-platform WebAssembly binary for esbuild, a JavaScript bundler.
  typescript - Not installed
  workbox-build - Not installed
  register-service-worker - Not installed
  electron - Not installed
  @electron/packager - Not installed
  electron-builder - Not installed
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Networking
  Host - quasarframeworkstackblitztempl-kdfi-w66ykahr
  en0 - 192.168.1.104

Relevant log output

Additional context

No response

[rmcf]

It seems I have the similar problem. Accordingly to documentation If you’ve installed the dotenv package and are using it in your quasar.config file then uninstall it and use our CLIs native

// .env
CLIENT_ID="123456789"

But after each quasar dev variables from .env file are “undefined” in quasar.config.js:

// quasar.config.js
export default defineConfig((ctx) => {
   console.log(process.env.CLIENT_ID); // undefined
}

To fix this I just returned to dotenv package:

// quasar.config.js
import 'dotenv/config'

export default defineConfig((ctx) => {
   console.log(process.env.CLIENT_ID); // "123456789"
}

[yusufkandemir]

#17917 explains this issue in detail.