The Build Not accepting the custom Environment Variables but building on defaults

[bhavukkalra]

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:

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

// 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

[liyasthomas]

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]

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.