Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Exposed env vars are not available

See original GitHub issue

Describe the bug

Using an .env file to define environment variables, static values are passed on and available in Vue as expected. Exposing existing env vars to Vue, however, does not work and produces empty values.

I’ve exposed the env var using the syntax from this comment.

STR:

open reproduction
start dev server with command PORT=4000 npm run dev

Expected: PORT should be available from main.js and output 4000.

Actual: PORT is an empty string.

Reproduction

https://stackblitz.com/edit/vitejs-vite-bxj6nd?devtoolsheight=33&file=.env

System Info

System:
    OS: macOS 11.6.1
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
    Memory: 1.36 GB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.2 - ~/.nix-profile/bin/node
    npm: 8.1.2 - ~/.nix-profile/bin/npm
  Browsers:
    Brave Browser: 97.1.34.81
    Safari: 15.2

Used Package Manager

npm

Logs

...
vite:config   env: {
vite:config     VITE_PORT: '',
vite:config     BASE_URL: '/',
vite:config     MODE: 'development',
vite:config     DEV: true,
vite:config     PROD: false
vite:config   },
...

Validations

Follow our Code of Conduct
Read the Contributing Guidelines.
Read the docs.
Check that there isn’t already an issue that reports the same bug to avoid creating a duplicate.
Make sure this is a Vite issue and not a framework-specific issue. For example, if it’s a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
The provided reproduction is a minimal reproducible example of the bug.

Issue Analytics

State:
Created 2 years ago
Reactions:3
Comments:16 (5 by maintainers)

Top GitHub Comments

3reactions

jost-scommented, Jan 26, 2022

but use all the process env will trigger unexpected error, may be env set aaa=123 in the build mode will replace const aaa = 123 to const 123 = 123

This is about explicitly exposed env vars, not all env vars. Only if you write

VITE_PORT=$PORT

in a .env file, it should be made available in Vite.

2reactions

motdotlacommented, Aug 30, 2022

Just released https://github.com/motdotla/dotenv-expand/blob/master/CHANGELOG.md#900-2022-08-30

Top Results From Across the Web

Environment variables not working (Next.JS 9.4.4)

You need to add a next.config.js file in your project. Define env variables in that file and those will be available inside your...

Env Variables and Modes - Vite

Vite exposes env variables on the special import.meta.env object. Some built-in variables are available in all cases: import.meta.env.

Basic Features: Environment Variables - Next.js

By default environment variables are only available in the Node.js environment, meaning they won't be exposed to the browser. ... This loads process.env....

Available Environment Variables - Bitrise Docs

Env Vars exposed by bitrise.io are available for builds running on bitrise.io virtual machines. ... This is not the same as the git...

Environment Variables - Travis CI Docs

Encrypted environment variables are not available to pull requests from forks due to the security risk of exposing such information to unknown code....