[GH-ISSUE #1639] The Build Not accepting the custom Environment Variables but building on defaults #516

New issue

Closed

opened 2026-03-16 15:49:18 +03:00 by kerem · 2 comments

kerem commented

2026-03-16 15:49:18 +03:00

Owner

Originally created by @bhavukkalra on GitHub (May 14, 2021).
Original GitHub issue: https://github.com/hoppscotch/hoppscotch/issues/1639

Describe the bug
The fb.js file in Helpers Directory can be seen importing variables from .env file. But the command process.env.GENERAL_VARIABLE_NAME seems to not be working and The app when cloned and custom environment variables(APP_ID, API_KEY etc) are inserted into the .env file. The file doesn't recognises the input variables and are set to undefined as a result due to the || operator the default variables are used for building the repo(which passes and app runs on a local environment)

(for example apiKey is set to "AIzaSyCMsFreESs58-hRxTtiqQrIcimh4i1wbsM" in .env file)

To Reproduce
Steps to reproduce the behavior:

Fill the .env file with custom variables(After making a project on firebase and copying the configurations)
Replace the config in fb.js in Helpers directory


// Initialize Firebase, copied from cloud console
const firebaseConfig = {
  apiKey: process.env.API_KEY || "AIzaSyCMsFreESs58-hRxTtiqQrIcimh4i1wbsM",
  authDomain: process.env.AUTH_DOMAIN || "postwoman-api.firebaseapp.com",
  databaseURL: process.env.DATABASE_URL || "https://postwoman-api.firebaseio.com",
  projectId: process.env.PROJECT_ID || "postwoman-api",
  storageBucket: process.env.STORAGE_BUCKET || "postwoman-api.appspot.com",
  messagingSenderId: process.env.MESSAGING_SENDER_ID || "421993993223",
  appId: process.env.APP_ID || "1:421993993223:web:ec0baa8ee8c02ffa1fc6a2",
  measurementId: process.env.MEASUREMENT_ID || "G-ERJ6025CEB",
}

with this(i.e removing all the default variables)


// Initialize Firebase, copied from cloud console
const firebaseConfig = {
  apiKey: process.env.API_KEY,
  authDomain: process.env.AUTH_DOMAIN ,
  databaseURL: process.env.DATABASE_URL,
  projectId: process.env.PROJECT_ID,
  storageBucket: process.env.STORAGE_BUCKET,
  messagingSenderId: process.env.MESSAGING_SENDER_ID,
  appId: process.env.APP_ID,
  measurementId: process.env.MEASUREMENT_ID,
}

Expected behaviour
Now Assuming the .env file is filled correctly, The app should intake the variables from the .env file(despite of the removal of the defaults) and show the HomeScreen on localhost(like this)

Seen behaviour -
The app after successful compilation gets stuck on the loading when the defaults are removed

Tested on

OS: [MacOS High Sierra]
Browser [chrome]
Version [Chrome Version - 90]

Additional context
I actually found about this bug when I was also trying to import the environment variables for a Nuxt App and it kept showing undefined for API_KEY(When Client Side rendered) and the actual value(When Server Side Rendered) through console.log()

Solution
I also found a solution to this bug and it lies in @nuxt/dotenv module, which requires a little bit of tweaking to the nuxt.config.js. Just wanted to discuss it first with the collaborators to make sure that this is a valid issue before a pull request is made for fixing this

Originally created by @bhavukkalra on GitHub (May 14, 2021). Original GitHub issue: https://github.com/hoppscotch/hoppscotch/issues/1639 **Describe the bug** The `fb.js` file in [Helpers Directory](https://github.com/hoppscotch/hoppscotch/blob/main/helpers/fb.js) can be seen importing variables from `.env` file. But the command `process.env.GENERAL_VARIABLE_NAME` seems to not be working and The app when cloned and custom environment variables(APP_ID, API_KEY etc) are inserted into the .env file. The file doesn't recognises the input variables and are set to `undefined` as a result due to the `||` operator the default variables are used for building the repo(which passes and app runs on a local environment) (for example `apiKey` is set to `"AIzaSyCMsFreESs58-hRxTtiqQrIcimh4i1wbsM"` in .env file) **To Reproduce** Steps to reproduce the behavior: 1. Fill the .env file with custom variables(After making a project on firebase and copying the configurations) 2. Replace the config in fb.js in Helpers directory ```javascript // Initialize Firebase, copied from cloud console const firebaseConfig = { apiKey: process.env.API_KEY || "AIzaSyCMsFreESs58-hRxTtiqQrIcimh4i1wbsM", authDomain: process.env.AUTH_DOMAIN || "postwoman-api.firebaseapp.com", databaseURL: process.env.DATABASE_URL || "https://postwoman-api.firebaseio.com", projectId: process.env.PROJECT_ID || "postwoman-api", storageBucket: process.env.STORAGE_BUCKET || "postwoman-api.appspot.com", messagingSenderId: process.env.MESSAGING_SENDER_ID || "421993993223", appId: process.env.APP_ID || "1:421993993223:web:ec0baa8ee8c02ffa1fc6a2", measurementId: process.env.MEASUREMENT_ID || "G-ERJ6025CEB", } ```` with this(i.e removing all the default variables) ```javascript // Initialize Firebase, copied from cloud console const firebaseConfig = { apiKey: process.env.API_KEY, authDomain: process.env.AUTH_DOMAIN , databaseURL: process.env.DATABASE_URL, projectId: process.env.PROJECT_ID, storageBucket: process.env.STORAGE_BUCKET, messagingSenderId: process.env.MESSAGING_SENDER_ID, appId: process.env.APP_ID, measurementId: process.env.MEASUREMENT_ID, } ```` ### **Expected behaviour** Now Assuming the .env file is filled correctly, The app should intake the variables from the `.env` file(despite of the removal of the defaults) and show the HomeScreen on localhost(like this) ![Screenshot 2021-05-14 at 10 29 15 PM](https://user-images.githubusercontent.com/41142068/118304135-e8c9ca00-b503-11eb-9f37-d5b92516b481.png) **Seen behaviour** - The app after successful compilation gets stuck on the loading _**when the defaults are removed**_ ![Screenshot 2021-05-14 at 10 12 45 PM](https://user-images.githubusercontent.com/41142068/118302637-1746a580-b502-11eb-86cc-7ac96a6274b2.png) **Tested on** - OS: [MacOS High Sierra] - Browser [chrome] - Version [Chrome Version - 90] **Additional context** I actually found about this bug when I was also trying to import the environment variables for a Nuxt App and it kept showing `undefined` for API_KEY(When Client Side rendered) and the actual value(When Server Side Rendered) through `console.log()` **Solution** I also found a solution to this bug and it lies in `@nuxt/dotenv` module, which requires a little bit of tweaking to the `nuxt.config.js`. Just wanted to discuss it first with the collaborators to make sure that this is a valid issue before a pull request is made for fixing this

kerem

2026-03-16 15:49:18 +03:00

closed this issue
added the
bug
label

kerem commented

2026-03-16 15:49:34 +03:00

Author

Owner

@liyasthomas commented on GitHub (May 15, 2021):

Hi @bhavukkalra, thanks for reporting this issue.
We're using NuxtJS RuntimeConfig properties to fetch environment variables from .env file in runtime.

Reference in nuxt.congif.js
https://github.com/hoppscotch/hoppscotch/blob/main/nuxt.config.js#L382-L399

Runtime congif has in-built dotenv support. This error might've been introduced in any latest version bumps of the dependency. We're working on a fix. Thanks for your patience.

@liyasthomas commented on GitHub (May 15, 2021): Hi @bhavukkalra, thanks for reporting this issue. We're using [NuxtJS RuntimeConfig properties](https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-runtime-config) to fetch environment variables from `.env` file in runtime. Reference in `nuxt.congif.js` https://github.com/hoppscotch/hoppscotch/blob/main/nuxt.config.js#L382-L399 [Runtime congif](https://nuxtjs.org/docs/2.x/directory-structure/nuxt-config#runtimeconfig) has in-built `dotenv` support. This error might've been introduced in any latest version bumps of the dependency. We're working on a fix. Thanks for your patience.

kerem commented

2026-03-16 15:49:39 +03:00

Author

Owner

@liyasthomas commented on GitHub (May 16, 2021):

Hi @bhavukkalra, we've pushed a fix along with a rollback to the @nuxt/dotenv package. The .env file from the root directory and or environment variables defined in hosting providers like Netlify, Vercel, etc should work now.

You can find a sample .env.example file in the root directory with our default environment keys. Rename this file to .env and replace its values with your Firebase config, GTM, and GA keys.

Let me know if you run into any other issues.

@liyasthomas commented on GitHub (May 16, 2021): Hi @bhavukkalra, we've pushed a fix along with a rollback to the `@nuxt/dotenv` package. The `.env` file from the root directory and or environment variables defined in hosting providers like Netlify, Vercel, etc should work now. You can find a sample `.env.example` file in the root directory with our default environment keys. Rename this file to `.env` and replace its values with your Firebase config, GTM, and GA keys. Let me know if you run into any other issues.

kerem referenced this issue

2026-03-17 00:21:08 +03:00

[PR #516] [MERGED] Validations for edit and create collections activity #2668