Unable to use process.env in development mode in web/frontend

[ZeMiguel]

ISSUE:

I created a Shopify APP and I can't use environment variables in development environment.

Expected behavior

Variables written in the .env file can be used inside web/frontend directory

Actual behavior

process.env.VARIABLE_NAME is undefined

Steps to reproduce the problem

1. Create a node app via CLI command (npm init @Shopify/app@latest)
2. Create a .env file in the root folder.
3. Add a custom variable to the .env file (YOUR_NEW_ENV='TEST')
4. Add the variable in the web/frontend/index.js file (console.log(process.env.YOUR_NEW_ENV))
5. Start development mode (npm run dev)

Console shows undefined instead of the expected value (TEST)

Note: I tried this in web/index.js where I put a new .env file and then did the same things above and it worked:

1. Added the import at the beginning of the page: import "dotenv/config"
2. console.log(process.env.YOUR_NEW_ENV, "@BACKEND_HERE") -> Returns TEST (as it should)

Then I did the same thing but now for the folder web/frontend where:

1. Install the package dotenv for web/frontend folder

2. import "dotenv/config" in web/frontend/index.jsx

3. Error: Uncaught TypeError: Cannot read properties of undefined (reading 'reduce')

And now I still cannot use env variables in web/frontend directory of my Shopify App.

[sniper2804]

How can you use env variables in any frontend?

Frontend code runs in the browser of the client. Not on any server. By fundamental definition, there is no concept of env variables for frontend tech.