"The variables in the .env file are not reflecting the latest updates. What is the best way

Currently, I am in the process of developing an application using Quasar (Vue) where I have stored my database keys in a .env file. Recently, I encountered an issue when attempting to switch to another instance and updating the keys in the env file. Despite making changes to the keys, the app continued to call the old values of the variables, indicating that they may be cached somehow.

To access the env file, I am utilizing dotenv.

In order to resolve this issue, I have already attempted resetting the browser history and running the following command:

npm cache clean --force

Can anyone provide guidance on how I can effectively reset the env files?

javascriptvue.jscachingenvironment-variablesquasar-framework

Answer №1

When working with Quasar, remember that env variables are managed through the quasar.config.js file instead of using separate .env files. For more information, check out the helpful documentation.

quasar.config.js

module.exports = function (ctx) {
  return {
    // ...

    build: {
      // passing down to UI code from quasar.config.js
      env: {
        API: ctx.dev
          ? 'https://dev.api.com'
          : 'https://prod.api.com'
      }
    }
  }
}

If you do need to use .env files, you'll have to include the dotenv package in your project and specify in the quasar.config.js file to utilize the env variables set with dotenv.

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

Answer №2

I encountered a similar issue with my Quasar 2 / Vite / pwa application (I didn't experience it in spa mode before switching).

Even though the hot reload works when I save my .env file (which functions without dotenv by default for Vite env according to Quasar, as mentioned when starting 

apps/quasar dev:  App • Using .env files: .env
), the values do not get updated.

To address this issue, here is a workaround:

  • Delete the ./node_modules/.q-cache folder
  • Restart the development server (quasar dev)

In addition, if you are unable to find your newly added variables at all, remember to prepend them with VITE_ because Vite will disregard them for security purposes otherwise.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilize JavaScript to parse HTML content retrieved through AJAX requests

My current project involves writing JavaScript code, specifically a Chrome extension, that needs to: Retrieve the contents of a web page using AJAX. Extract specific content from the page by identifying certain elements within the HTML string and retriev ...

javascripthtmlajax

Navigating race conditions within Node.js++]= can be challenging, but there are strategies

In the process of developing a MERN full stack application, I encountered a scenario where the frontend initiates an api call to "/createDeckOfCards" on my NodeJS backend. The main objective is to generate a new deck of cards upon clicking a button and the ...

javascriptnode.jsmongooserace-conditionmern

Dynamic Sizing of Elements + Adaptive Text Overlay

There were 2 obstacles I encountered when trying to create an image-based drop-down menu : No matter how much effort I put in, I couldn't figure out how to make a flexed element inside a container maintain the same height as the adjacent element. [ ...

javascripthtmlcssimagelayout

Activate a spinner when a button is clicked within a row of an antd table

I created a table with a column that includes a button like the one below: const columns = [ ... { title: "button", dataIndex: "key", render: (text, record) => { return ( <Button icon={<Del ...

javascriptreactjsnext.jsantd

Altering webpage content through the use of Ajax

I need a solution for dynamically updating web page content using JavaScript AJAX. One idea I had was to store different div layouts in separate files, like so: BasicDiv.div: <div> <p>Some Text</p> <button> A Button </ ...

javascripthtmlajax

Determine how the scale of a transform changes over time by calculating the function of elapsed time [ transform: scale(x, y

I am currently working on a container that can be expanded and collapsed simply by clicking on a chevron icon. The functionality to collapse or expand the container resides within a function called transformAnimation. This function code closely resembles t ...

javascripthtmlcssanimationmath

JavaScript: Code for creating an overlay component

As someone who is new to javascript and Jquery, I have very little understanding of what I am doing. I have been relying on trial and error to make progress so far. While I am aware that users have the ability to disable javascript, I prefer not to use PHP ...

javascriptjquery

`Hovering over a div triggers a continuous animation loop`

I've gone through various questions and solutions related to this issue, but unfortunately, none of them seem to work for me. It's possible that I might be overlooking something or my scenario is slightly unique. The main problem I'm facing ...

javascriptjqueryhtmlanimation

Durandal attempts to retrieve a view located within the viewmodel directory

Having an issue with durandal's compose binding as it is looking for views under app/viewmodels instead of app/views The ViewModel code: define(["fields/fieldClosures"], function (fields) { var ctor = function(opt) { this.value = opt.valu ...

javascriptknockout.jsdurandal

Having difficulty understanding why the Javascript regex is not functioning as expected

Can you help me validate user input to ensure it is a positive currency value in the correct format? Examples of valid formats include: 0.5, 0.55, 5 (please note this one), 5.5, 5.55, 55, etc. This is the code I am currently using: if ($("#gross").val() ...

javascriptregex

Avoid using `@typescript-eslint/no-floating-promises` when using a `const` function

Can anyone help me understand why the @typescript-eslint/no-floating-promises rule works with some async functions but not all? To my understanding, these two functions should be equivalent: const getUser = async (userId: string): Promise<User> => ...

javascripttypescripttypescript-eslint

Using Input Mask with TextField Component in Material-UI with React Hook Form

Currently, I am trying to utilize the MUI's TextInput component alongside the MaskInput component from react-input-mask and react-hook-form. Despite everything appearing to be functioning correctly, an error message related to using refs keeps popping ...

javascriptreactjsmaterial-uireact-hook-form

What causes one CSS file's properties to be inherited by another CSS file in a React application?

I'm puzzled as to why my hero section file seems to be adopting the styling from the navbar CSS file. I do understand that the index.css file sets properties for the entire app, but in my case, I have separate CSS files for different components instea ...

javascripthtmlcssreactjs

Triggering this function when clicked

I am trying to figure out a way to trigger this code onClick instead of automatically. Can anyone help me with this question? Below is the JavaScript code snippet: $("input[type=radio],button").each(function () { var outputName = $(this).attr("d ...

javascriptjqueryhtmlonclickmidi

Utilizing JavaScript within a WordPress loop

I'm facing an issue with running JavaScript within my WordPress loop where it doesn't seem to recognize the PHP variables. My goal is to create a functionality where clicking on one box reveals hidden content, and clicking on the same box or anot ...

javascriptphpjquerywordpress

Using VueJS, an object property containing spaces is causing issues with setting up a watcher

I have a formdata object with a property called "Accounting changing". I successfully display and manipulate the property in console. However, when attempting to add a watcher to the formdata object's property "formData.Accounting Changing", an error ...

vue.js

Mastering the art of using componentWillUnmount() in ReactJs

According to the official tutorial: componentWillUnmount() is called right before a component is removed and destroyed. It's used for any necessary cleanup tasks like stopping timers, cancelling network requests, or cleaning up DOM elements that we ...

javascriptreactjs

Infinite scrolling feature on Kendo UI mobile listview showcasing a single item at a time

Currently, I am utilizing the kendo ui mobile listview and encountering an issue when setting endlessScroll or loadMore to true. The problem arises as the listview only displays the first item in such instances. Upon inspecting with Chrome inspector, I ob ...

javascriptcsslistviewkendo-ui

A simple method for bulk editing in Angular UI Grid

Is there a way to enable mass editing in Angular UI Grid by allowing all rows to show editable input fields at once, rather than just one at a time? I have searched online for a solution without success and am now turning to this forum for help. If anyone ...

javascriptangularjsangular-ui-grid

How about, "Enhance your website navigation with a sleek anchor

After many attempts to implement smooth scrolling on my Bootstrap project, I have tried numerous Youtube tutorials and Google search results without any success. The latest attempt I made was following this Stack Overflow post Smooth scrolling when clickin ...

javascripthtmlcssbootstrap-4smooth-scrolling