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

Shopify Apps
1

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_77 /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.

1 Like
2

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.

3

This not true, when you are working with frontend frameworks like vue.js the app running on the machine need .env for frontend configuration

4

Sorry to resurrect, but have you figured it out? I too can’t access custom .env variables in my configurations, it’s almost as if they’re overwritten/cleaned by “shopify app dev” command, which then added the SHOPIFY_ vars.