Accessing ENV files in Vite Version 4

Question

I am working on a web application built using HTML/CSS/JS + Vite.js. We were running on Vite v2.8.3 and wanted to upgrade to the latest v4.3.3. I was able to successfully complete the update and run the server, but then found that I was no longer able to access the variables in my DOTENV file. Nothing about the files or the file structure changed - all I did was update to the latest Node.js and Vite.js. The ENV files only stopped working after I updated Vite.

I was able to solve the problem by moving the ENV file one level down in my file structure -- but this concerns me since I don't understand why that change was necessary.

Here's my file structure:

web-app/
  |-- www-vite
      |-- pages
      |-- index.html
      |-- main.js
      |-- style.css
      |-- vite.config.js
      |-- package.json
      |-- package-lock.json
      |-- node_modules
      |-- .gitignore
  |-- .env.development // Only works when I move it one level down into www-vite directory 
  |-- .env.production // Only works when I move it one level down

Here is what the Vite docs have to say about ENV variables and modes. Here's the migration guide from v2, as well as the migration guide from v3. I found that updating Vite at all, even just from 2.8.3 to 2.9.5, broke the ENV variables.

My DOTENV file looks like this:

VITE_ENDPOINT_BASE_URL = (private URL goes here)

Then I grab the ENV variable in the main.js file like so:

export const endpoint_base_url = import.meta.env.VITE_ENDPOINT_BASE_URL; 
// Returns undefined after updating Vite, only works after I move it into www-vite directory

Here's what my config file looks like. I tried adding "envDir" and pointing to the correct file per the docs, but that didn't work. I see there's an option to use a loadENV helper, but i'm not sure how to integrate that with what I already have in my config file. I'm also wondering if I need to do this at all, or if it's fine to just move the .env files into the www-vite directory.

vite.config.js

const { resolve } = require("path");
const { defineConfig} = require("vite");

module.exports = defineConfig({
  build: {
    rollupOptions: {
      input: {
        envDir: "../.env.production", // Does not work
        main: resolve(__dirname, "index.html"),
        login: resolve(__dirname, "./pages/login/login.html"),
        home: resolve(__dirname, "./pages/home/home.html"),
        recap: resolve(__dirname, "./pages/recap/recap.html"),
        leaderboards: resolve(
          __dirname,
          "./pages/leaderboards/leaderboards.html"
        ),
      },
    },
  },
});

Yes, or rather, I don't want to move it out of the parent dir, where it was previously working before I updated vite. — Mickey Vershbow, Apr 28 '23 at 19:58

score 1 · Answer 1 · answered Apr 28 '23 at 07:10

1

To change the default env path you can set it in your vite config

Vite Docs

export default defineConfig({
  envDir: '../'
})

answered Apr 28 '23 at 07:10

kennarddh

2,186
2
6
21

thanks so much, I didn't find this in the docs. I tried adding it to my config file, but still got the same error. Wondering if you could take another look at my post? I updated it with my config file code at the bottom. – Mickey Vershbow Apr 28 '23 at 19:56
Also wondering if there's any reason not to just move the files down one level into the `www-vite` directory? I don't want to break the production pipeline. – Mickey Vershbow Apr 28 '23 at 19:57
It depends on your project. Maybe you have to share same env in multiple project. – kennarddh Apr 29 '23 at 03:54

Accessing ENV files in Vite Version 4

1 Answers1