Environment variables from the environment are ignored

[Maronato]

Do NOT ignore this template or your issue will have a very high chance to be closed without comment.

Describe the bug

Only variables from .env files are loaded. Environment variables starting with VITE_, but defined outside .env files are not included in import.meta.env.

Reproduction

• Start vite within an environment containing variables starting with VITE_, using cross-env or other methods.
• These variables won't be available to the application, even though they are to the process

https://github.com/Maronato/vite-env-repro

System Info

• required vite version: v1.0.0-beta.12
• required Operating System: macOS 10.15.5
• required Node version: v12.17.0
• Optional:
  • yarn version: 1.22.4
  • Installed vue version: 3.0.0-beta.24
  • Installed @vue/compiler-sfc version: 3.0.0-beta.24

Logs (Optional if provided reproduction)

yarn run v1.22.4
warning package.json: No license field
warning ../package.json: No license field
$ cross-env VITE_CROSS_ENV=crossEnvVariable vite --debug
vite v1.0.0-beta.12
  vite:config env mode: development +0ms
[dotenv][DEBUG] did not match key and value when parsing line 2: 
  vite:config env: { VITE_DOT_ENV: 'dotEnvVariable' } +2ms
  vite:optimize Hash is consistent. Skipping. Use --force to override. +0ms
Port 3000 is in use, trying another one...
  vite:optimize Hash is consistent. Skipping. Use --force to override. +107ms

  Dev server running at:
  > Local:    http://localhost:3000/
  > Network:  http://192.168.0.66:3000/
  > Network:  ***:3000/

  vite:server server ready in 502ms. +0ms
  vite:hmr         / imports /src/main.js +0ms
  vite:rewrite (skipped) / +0ms
  vite:rewrite /src/main.js: rewriting +36ms
  vite:rewrite     "vue" --> "/@modules/vue.js" +2ms
  vite:hmr         /src/main.js imports /@modules/vue.js +38ms
  vite:rewrite     "./App.vue" --> "/src/App.vue" +1ms
  vite:hmr         /src/main.js imports /src/App.vue +1ms
  vite:rewrite     "./index.css" --> "/src/index.css?import" +1ms
  vite:hmr         /src/main.js imports /src/index.css +1ms
  vite:rewrite (skipped) /vite/hmr +62ms
  vite:resolve (optimized) vue.js -> node_modules/.vite_opt_cache/vue.js +0ms
  vite:rewrite /@modules/vue.js: no imports found. +9ms
  vite:sfc /Users/maronato/Documents/misc/temp/dotenv/src/App.vue parsed in 7ms. +0ms
  vite:rewrite /src/App.vue: rewriting +13ms
  vite:rewrite     "./components/HelloWorld.vue" --> "/src/components/HelloWorld.vue" +1ms
  vite:hmr         /src/App.vue imports /src/components/HelloWorld.vue +85ms
  vite:hmr ws client connected +4ms
  vite:sfc /Users/maronato/Documents/misc/temp/dotenv/src/App.vue parse cache hit +12ms
  vite:sfc /src/App.vue template compiled in 12ms. +12ms
  vite:rewrite (skipped) /src/App.vue?type=template +20ms
  vite:sfc /Users/maronato/Documents/misc/temp/dotenv/src/components/HelloWorld.vue parsed in 3ms. +7ms
  vite:rewrite /src/components/HelloWorld.vue: rewriting +6ms
  vite:rewrite     injecting import.meta.env for /src/components/HelloWorld.vue +0ms
  vite:rewrite /vite/env: no imports found. +70ms
  vite:sfc /Users/maronato/Documents/misc/temp/dotenv/src/components/HelloWorld.vue parse cache hit +71ms
  vite:sfc /src/components/HelloWorld.vue template compiled in 10ms. +10ms
  vite:rewrite (skipped) /src/components/HelloWorld.vue?type=template +12ms
  vite:rewrite (skipped) /src/index.css?import +5ms
  vite:rewrite (skipped) /src/assets/logo.png +18ms

[yyx990803]

That's intended. If you want to explicitly expose a actual env variable, you can expand it in .env:

VITE_EXPOSED=$SOME_VAR

[heywhy]

This issue has caused me some hours because I couldn't figure out why the deployed app is failing even when the env VITE_* is set. I think the project doc/readme could have made it more explicit. 😞

[antongorodezkiy]

@yyx990803

That's intended. If you want to explicitly expose a actual env variable, you can expand it in .env

Seems like that's not possible with tools like Netlify (they have an interface for env variables and then they (I think) pass them as CLI parameters)

I thought env params approach when CLI is used directly is pretty common. What was the intention to handle them from the files only?

---

For anyone who will search for the same issue - I solved it by using define setting in vite.config.js like this:

import path from 'path'
import vue from '@vitejs/plugin-vue'

const viteEnv = {}
Object.keys(process.env).forEach((key) => {
  if (key.startsWith(`VITE_`)) {
    viteEnv[`import.meta.env.${key}`] = process.env[key]
  }
})

export default {
  alias: {
    '@': require('path').resolve(__dirname, 'src')
  },
  define: viteEnv,
  plugins: [
    vue()
  ]
}

[yyx990803]

This should be fixed in 956cd2c

[dimaash]

@yyx990803

That's intended. If you want to explicitly expose a actual env variable, you can expand it in .env

Seems like that's not possible with tools like Netlify (they have an interface for env variables and then they (I think) pass them as CLI parameters)

I thought env params approach when CLI is used directly is pretty common. What was the intention to handle them from the files only?

For anyone who will search for the same issue - I solved it by using define setting in vite.config.js like this:

import path from 'path'
import vue from '@vitejs/plugin-vue'

const viteEnv = {}
Object.keys(process.env).forEach((key) => {
  if (key.startsWith(`VITE_`)) {
    viteEnv[`import.meta.env.${key}`] = process.env[key]
  }
})

export default {
  alias: {
    '@': require('path').resolve(__dirname, 'src')
  },
  define: viteEnv,
  plugins: [
    vue()
  ]
}

Could you please provide a snippet of how is the defined "viteEnv" later used within code ?
I've tried exactly same thing but this

import.meta.env.VITE_VUE_APP_API_URL

gives in an error with Typescript/vue3,

Property 'env' does not exist on type 'ImportMeta'.ts(2339)

[yyx990803]

Did you do this? https://vitejs.dev/guide/features.html#client-types

[wiesson]

What about server side "only" env vars? I can easily use VITE_ prefixed env vars with import.meta.env but if I add non VITE_* vars to the .env file, they are not exposed internally.

Example

FIREBASE_CLIENT_EMAIL="this should not be available to the client"
FIREBASE_PRIVATE_KEY="this should not be available to the client"
VITE_FIREBASE_API_KEY=
VITE_FIREBASE_AUTH_DOMAIN=
VITE_FIREBASE_DATABASE_URL=
VITE_FIREBASE_PROJECT_ID=
VITE_FIREBASE_STORAGE_BUCKET=
VITE_FIREBASE_MESSAGING_SENDER_ID=
VITE_FIREBASE_APP_ID=
VITE_FIREBASE_MEASUREMENT_ID=G-KMNHBJCSWT

[aiibe]

What about server side "only" env vars? I can easily use VITE_ prefixed env vars with import.meta.env but if I add non VITE_* vars to the .env file, they are not exposed internally.

Example

FIREBASE_CLIENT_EMAIL="this should not be available to the client"

FIREBASE_PRIVATE_KEY="this should not be available to the client"

VITE_FIREBASE_API_KEY=

VITE_FIREBASE_AUTH_DOMAIN=

VITE_FIREBASE_DATABASE_URL=

VITE_FIREBASE_PROJECT_ID=

VITE_FIREBASE_STORAGE_BUCKET=

VITE_FIREBASE_MESSAGING_SENDER_ID=

VITE_FIREBASE_APP_ID=

VITE_FIREBASE_MEASUREMENT_ID=G-KMNHBJCSWT

I'm stuck too with SvelteKit for server routes

[patak-dev]

@aiibe if the question is about Vite, please start a GitHub Discussion or join the chat at Vite Land. We have a #svelte channel there. Comments on old closed issues will probably get lost.

About this particular problem, you could also join https://svelte.dev/chat

If there is a concrete bug, please create a minimal reproduction and a new issue.