import.meta.env but undefined in the console

[bejanbogdan93]

Hi there.
I am trying to get a variable from .env file and log it (using console.log()) but returns undefined.

• .env file is at the root of my project.
• variable in .env is named VITE_REACT_APP_SERVER_URL.
• trying to display it from ./src/app/app.jsx like this: console.log(import.meta.env.VITE_REACT_APP_SERVER_URL);

File structure:

Please point to what I am doing wrong here. Thanks

[patak-dev]

Here is an example working: https://stackblitz.com/edit/vitejs-vite-nvdere?file=index.html&terminal=dev

When asking this kind of questions, it is a good idea to share a reproduction so others can check it out. Maybe there is a typo somewhere for example?

[Natalia-Srg]

that's my structure at the moment

and my .env constants :
VITE_BASE_URL = 'https://api.thecatapi.com/v1/images/search'
VITE_GET_10_ITEMS_URL = 'https://api.thecatapi.com/v1/images/search?limit=10'

Wanted to develop a request without hardcoding URLs, but it seems like the environment variables are not being overridden

[harvzor]

Looks like the .env file is under the ./src directory when it should be under the root dir.

[lauguimel]

I have the same problem (vite+svelte+framework7 app).
Here is an example: https://stackblitz.com/edit/vitejs-vite-zq9k4a?file=src%2Fpages%2Fabout.svelte

console.log is both in the "home" and "about" components, see src/pages

[lauguimel]

answering to myself: the .env file must be in src/ folder when using framework7
source: https://forum.framework7.io/t/how-to-load-access-environment-variables-with-f7-svelte/15650/2