Getting Env variables to work with import.meta.env

[mrpbennett]

I am trying to get some environment variables to work but for the life of me I can not...I have looked through a few SO answers and they all seem to point to how I have set things up.

Yet I keep getting undefined. This is how I am testing the variable.

import {useState} from 'react'
import {FaCog} from 'react-icons/fa'

function App() {
  const [data, setData] = useState([])
  const [dealId, setDealId] = useState('')
  const [loading, setLoading] = useState(null)
  const [error, setError] = useState('')

  // Counter
  const [count, setCounter] = useState(0)

  console.log('HOST:', import.meta.env.HOST) // returns undefined

This is my .env file, which is placed in the root

# .env
HOST=127.0.0.1:8000

This is my structure (removed node_modules) for ease

.
├── .env
├── index.html
├── package-lock.json
├── package.json
├── postcss.config.js
├── src
│   ├── App.jsx
│   ├── favicon.svg
│   ├── index.css
│   ├── logo.svg
│   └── main.jsx
├── tailwind.config.js
└── vite.config.js

Where am I going wrong? I have restated the vite server many times already...i am stumped

[sapphi-red]

You need to prefix the env name with VITE_.
https://vitejs.dev/guide/env-and-mode.html#env-files:~:text=To%20prevent%20accidentally%20leaking%20env%20variables%20to%20the%20client%2C%20only%20variables%20prefixed%20with%20VITE_%20are%20exposed%20to%20your%20Vite%2Dprocessed%20code.%20e.g.%20the%20following%20file%3A

[hassanshahzadaheer]

My issue was resolved by moving the .env file from the src directory to the root directory of my project.

[An0nRaptor]

Thanks buddy it helped me :)

[benain]

Finally!! After hours trying to find the issue, I saw this was my mistake as well... Thanks mate!

[kristinhorton]

Like hassanshahzadaheer my issue was resolved by moving the .env file from src to root

[alessandroRoaro]

pretty sick...

[sekoyo]

I made env vars e.g. VITE_SOMETHING in .env and .env.production and still doesn't exist at import.meta.env.VITE_SOMETHING after restarting 🤔 Had to add .env.local even though docs say .env is for everything

[HamzaM01]

Hi @dominictobias. Could you please tell how did you get your env set to local? Cuz mine is set on development by default. Hence, it reads the .env.development file and not .env.local or .env file itself.

[GabrielWeissReis]

My mistake was that I was calling the file as "variables.env.development", but the right way is just ".env.development", with the dot starting the name. I removed the "variables" part and everything worked fine.

• Inside the ".env.development" file: VITE_TEST=123f
• In any file: console.log(import.meta.env.VITE_TEST);

[sirisenju]

I could kiss u right now!!!! u just saved me from 3 days of finding the problem!!!!!! thank you!!!!!!

[MichaelOgunjimi]

do you mean i have to add .local mode to make it like this:
.env.local.development and .evn.local.production ?

[luigimannoni]

After a bit of head-bashing it seems for me what has really worked is to place the .env file at the build root (and not project root). Eg: I was building everything from ./src and moved my html file in there so had to do either:

• Moving index.html back on the project root
• Or moving .env inside the src folder

[phongdo01]

Thank god took you here, I spent whole morning only to resolve it

[wintercounter]

Same here. So stupid tbh. Env files should be resolved from process.cwd(), not from entry folder...

[andyngdz]

Thanks man, you saved me

[detaybey]

1. my tsconfig.json has the types: ["vite/client"]
2. all my env variables start with VITE_
3. my html is on root, not under any subfolder.
4. my .env file is on root as well.
5. when i hover on import.env it says "Property 'env' does not exist on type 'ImportMeta'"

why

[barbaragrinop]

same here

[Omkar76]

You'll need to add this in a type definitions file. For example, create vite-env.d.ts and add type definition like this :

/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_REACT_APP_BACKEND_URL: string;
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

Docs here : https://vitejs.dev/guide/env-and-mode.html#intellisense-for-typescript

[scottyschup]

That really shouldn't be necessary. It's possible you have multiple tsconfig files and your IDE is looking at the wrong one. That was the issue I was having.

[NerdPraise]

in my case, adding import vite/client to .d.ts fixed up the error

[VadymKuntso1]

Also in tsconfig.json:

"include": [
    ".d.ts"
  ],

[ibrahimkundlik]

In my case the issue was with optional chaining. Not sure why it does not work when optional chaining is added.

.env file placed in root folder + "SPG" added as envPrefix

SPG_TOKEN=bxwpTESTuwie

getting env variables

console.log(import.meta?.env?.SPG_TOKEN); // undefined

console.log(import.meta.env.SPG_TOKEN); // bxwpTESTuwie

[Abdulbariii]

Same here

[codejesse]

Use a base variable
once you create your .env file do restart the development server and check if it works or

E.g const api_key = import.env.VITE_API KEY
console.log(api_key)

[lmdvlpr]

Thanks!
This solves my problem 👍🏽

[jplukarski]

I'm getting undefined for import.meta.env. I built my project using the Vanilla JS scaffold right from the Vite docs.

I added a .env file at the root of my project and added VITE_ prefix to my variable names as per the documentation.

However, I cannot access any variables. I get undefined for everything. So I tried to log just import.meta.env and I get undefined. When I log the import.meta object, the only properties are the url and a resolve function, like the MDN documentation mentions.

Here is what I tried:

• Renaming .env to .env.local
• Renaming .env to .env.development
• Moving .env and the above renames to the src directory
• Moving .env and the above renames to the public directory
• Restarted the dev server and cleared the Cache in the browser between every attempt

What am I doing wrong?

[Aster0N]

I had the similar problem. It work for me when I moved my .env.local file to the root directory of my project (so, not to the src)

Like that:

[nitishkalra]

This solution worked for me as well . Thanks

[himanshu-tyd]

I had the same problem. when i move .env.local file to root directoru it resolve

JUST LIKE THIS

it worked thanks.

[ProgrammerNephi]

That worked for me, Thanks!

[ssamal2801]

FOUND THE SOLUTION:

Looks like vite has changed how you can access environment inside the config file.

-> import.meta.env works once the app is live, not before that. This will work if you print it in a react/any js component.

To access env variable inside vite.config.js here is how yo do it:

import { defineConfig, loadEnv } from 'vite'

export default defineConfig(({ command, mode }) => {
  // Load env file based on `mode` in the current working directory.
  // Set the third parameter to '' to load all env regardless of the `VITE_` prefix.
  const env = loadEnv(mode, process.cwd(), '')
  return {
    // vite config
    define: {
      __APP_ENV__: JSON.stringify(env.APP_ENV),
    },
  }
})

You can access the environment variable as a parameter, in the above example, the command and mode variables are extracted from env. Cheers!

https://vitejs.dev/config/#configuring-vite

[fredcalmon]

Please help !! I still cannot access the variables. The .env file is in the root and with preflix. I tried VITE_ and REACT_APP. VITE 5.1

What is wrong???? I can not understand. It is a brand new installation of react + vite.

[Jabinuu]

I had the same problem😂

[luigimannoni]

You need to slightly adjust the config, .env files do not work out of the box - see this paragraph https://vitejs.dev/config/#using-environment-variables-in-config

[cjcdev]

@sapphi-red

OK, I seem to be having similar issues getting environment variables to work. In particular, I can get them to work in 'development' mode, but not in 'production' mode (vite preview).

1. I have a .env in the root (same path as index.html). With the following contents

VITE_FRONTEND_VERSION=dev

2. I also created copies of the .env to .env.production and .env.local (just in case)
3. vite.config.ts (note: in the console log before, I do see the value show up in production mode), but it doesn't show up past that):

export default defineConfig(({ mode }) => {
    const env = loadEnv(mode, process.cwd(), 'VITE_')
    console.log(`LOAD ENV: `, env)
    return {
        define: {
            VITE_APP_VERSION: JSON.stringify(env.VITE_FRONTEND_VERSION),
        },
    }
});

4. vite-env.d.ts:

/// <reference types="vite/client" />
interface ImportMetaEnv {
    readonly VITE_FRONTEND_VERSION: string
}

interface ImportMeta {
    readonly env: ImportMetaEnv
}

declare const VITE_APP_VERSION: string;

5. In my JSX, I try to access each of these by..

 <div>Frontend Version: {VITE_APP_VERSION}</div>
 <div>Frontend Version2: {import.meta.env.VITE_FRONTEND_VERSION}</div>

As I said, both methods work when I run as development build. But neither gives me the env variable when I use production.
Vite version: 5.3.5

Please, what am I doing wrong?!

[cjcdev]

I figured out what I was doing wrong. I wasn't setting the ENV variable or creating the .envs until AFTER doing npm run build. Env variables need to be created before doing the build in the container.