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
- Create a node app via CLI command (npm init @Shopify_77 /app@latest)
- Create a .env file in the root folder.
- Add a custom variable to the .env file (YOUR_NEW_ENV=‘TEST’)
- Add the variable in the web/frontend/index.js file (console.log(process.env.YOUR_NEW_ENV))
- 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:
- Added the import at the beginning of the page: import “dotenv/config”
- 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:
-
Install the package dotenv for web/frontend folder
-
import “dotenv/config” in web/frontend/index.jsx
-
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.