How to Use Oxygen Environment Variables in Client Components?

[grichards]

We have client-side components that need to make API calls to 3rd party resources.

We've created a .env and have defined PUBLIC_* variables to contain the necessary values.

In our localhosts, import.meta.env.PUBLIC_* is working fine.

When we deploy to Oxygen, we're getting "undefined" for all our PUBLIC_* variables despite having defined them within the Shopify interface for environment variables.

I have also tried addressing this using Oxygen.env.PUBLIC_* in our client components, but with the same "undefined" results.

The docs and related GitHub discussions don't seem to clearly indicate how to use Oxygen environment variables in client components.

How is this supposed to work?

[firuzcanh]

I have same issue. We have also getOxygenVariable method to get value of variable. It's also not working.

[grichards]

Since we couldn't find an answer... we decided that client side variables are not supported... so we just store them in a "const.js" file and don't try to load them per environment.

[firuzcanh]

Thank you. I have done it with same way. Hydrogen team will release new major changes in next months. I hope this issue will be solved by them.