process.env not working on build (app-vite-v2.0.0-beta.1)

[Peter Temi]

What happened?

all process.env values return undefined only on pro mode quasar b but working on dev mode quasar d

What did you expect to happen?

should work the same way as the dev mode work

Reproduction URL

no link

How to reproduce?

run this quasar b

Flavour

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

Areas

SPA Mode, Capacitor Mode

Platforms/Browsers

Firefox, Chrome, Safari, iOS, Android

Quasar info output

Operating System - Darwin(23.2.0) - darwin/arm64
NodeJs - 20.11.0

Global packages
  NPM - 10.2.4
  yarn - 1.22.21
  @quasar/cli - 2.3.0
  @quasar/icongenie - 3.1.1
  cordova - Not installed

Important local packages
  quasar - 2.14.3 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 2.0.0-beta.1 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.16.9 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.4.18 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.2.5
  pinia - 2.1.7 -- Intuitive, type safe and flexible Store for Vue
  vuex - Not installed
  vite - 5.1.1 -- Native-ESM powered web dev build tool
  esbuild - 0.20.0 -- An extremely fast JavaScript and CSS bundler and minifier.
  eslint - 8.56.0 -- An AST-based pattern checker for JavaScript.
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  @capacitor/core - 5.7.0 -- Capacitor: Cross-platform apps with JavaScript and the web
  @capacitor/cli - 5.7.0 -- Capacitor: Cross-platform apps with JavaScript and the web
  @capacitor/android - 5.7.0 -- Capacitor: Cross-platform apps with JavaScript and the web
  @capacitor/ios - 5.7.0 -- Capacitor: Cross-platform apps with JavaScript and the web

Quasar App Extensions
  *None installed*

Relevant log output

No response

Additional context

Build succeeded

Build mode............. spa
Pkg quasar............. v2.14.3
Pkg @quasar/app-vite... v2.0.0-beta.1
Pkg vite............... v5.1.1
Debugging.............. no
Publishing............. no
Browser target......... es2019|edge88|firefox78|chrome87|safari13.1

[github-actions]

Hi @diadal! 👋

It looks like you provided an invalid or unsupported reproduction URL.
Do not use any service other than Codepen, jsFiddle, StackBlitz, Codesandbox, and GitHub.
Make sure the URL you provided is correct and reachable. You can test it by visiting it in a private tab, another device, etc.
Please edit your original post above and provide a valid reproduction URL as explained.

Without a proper reproduction, your issue will have to get closed.

Thank you for your collaboration. 👏

[Razvan Stoenescu]

Hi,

This is simply how Vite 5 works. The production code should directly reference the full process.env.[X] which will get replaced inline with what you define it with. A console.log(process.env) should not exist in the production code.

[Peter Temi]

in a short word

const appVersionX = process.env.VITE_APP_VERSION;
console.log('appVersionX: ', appVersionX); // worked

const evn_data = process.env;
const appVersion = evn_data?.VITE_APP_VERSION; // not working
console.log('appVersion: ', appVersion);

[Razvan Stoenescu]

The process.env.[X] gets replaced inline, for multiple reasons, including security. It is not an Object created in memory that you can handle like any other. Directly write process.env.VITE_APP_VERSION so it can get matched and replaced in your production code. The process.env should not be assignable, and one of the reasons for this is that if your code has access to it then so is a user of your UI with an opened devtools, which poses a great security risk.

[Peter Temi]

nice

[Peter Temi]

this resolved the issue for me

import { boot } from 'quasar/wrappers';

const all_env = {
  VITE_APP_TITLE: process.env.VITE_APP_TITLE,
  VITE_APP_NAME: process.env.VITE_APP_NAME,
  VITE_APP_VERSION: process.env.VITE_APP_VERSION,
  VITE_APP_COLOR: process.env.VITE_APP_COLOR,
  VITE_GOOGLE_KEY: process.env.VITE_GOOGLE_KEY,
  VITE_FIREBASE_API_KEY: process.env.VITE_FIREBASE_API_KEY,
  VITE_FIREBASE_DOMAIN: process.env.VITE_FIREBASE_DOMAIN,
  VITE_FIREBASE_URL: process.env.VITE_FIREBASE_URL,
  VITE_FIREBASE_PROJECT_ID: process.env.VITE_FIREBASE_PROJECT_ID,
  VITE_FIREBASE_BUK: process.env.VITE_FIREBASE_BUK,
  VITE_FIREBASE_MSG_ID: process.env.VITE_FIREBASE_MSG_ID,
  VITE_FIREBASE_APP_ID: process.env.VITE_FIREBASE_APP_ID,
  VITE_FIREBASE_MEN: process.env.VITE_FIREBASE_MEN,
  VITE_PUB_KEY_DEV: process.env.VITE_PUB_KEY_DEV,
  VITE_PUB_KEY_PRO: process.env.VITE_PUB_KEY_PRO,
};

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $all_env: typeof all_env;
  }
}

export default boot(({ app }) => {
  app.config.globalProperties.$all_env = all_env;
});

[Razvan Stoenescu]

Just be aware that all your keys will now be part of the production build (in plain form) whether you use them or not.

[Peter Temi]

Yes I know