`vite.define` environment variables are not available in Cloudflare Pages

[maxcountryman]

What version of astro are you using?

latest

Are you using an SSR adapter? If so, which one?

Cloudflare

What package manager are you using?

npm

What operating system are you using?

Mac

Describe the Bug

The recommended approach for defining environment variables for Cloudflare Pages no longer works.

Variables defined in this manner are accessible locally or with wrangler preview but remain undefined when deployed to Cloudflare Pages. Note that environment variables have been defined via the Cloudflare Pages settings view of the CF dashboard and not via .def.vars.

Others have noted this method is no longer working.

Link to Minimal Reproducible Example

https://discord.com/channels/830184174198718474/1034300919820595241/1034300919820595241

Participation

• I am willing to submit a pull request for this issue.

[matthewp]

cc @AirBorne04 is this the right way to set runtime env vars in Cloudflare?

[AirBorne04]

@matthewp this is a little tricky question 😄 I think what is needed is a better description in the docs.

@maxcountryman I am not sure what is the issue, i guess from our former discussing, there is a gap between the Cloudflare runtime and the Astro build time. (Unfortunately do not have access to the discord channel) Are you expecting the vars defined like recommended approach to show up in the Cloudflare settings. Or is the actual value undefined during the cloudflare build? Have you tried with a simple text value?

[maxcountryman]

@AirBorne04 the actual value is undefined during the CF build. I am manually setting the vars in the CF settings view, so no I am not expecting vite to do that. What I am expecting is that during the build phase vite.define will interpolate the actual values, but instead it's seeing undefined when the env vars are in fact set. This is only the case in the CF build environment, it works as expected locally and with wrangler preview. There's some anecdotal evidence suggesting this used to work but no longer does. Hard-coding the values does work, but that's obviously not ideal for a number of reasons.

[AirBorne04]

Interesting, so the actual issue is only happening in the cloudflare build environment. I gotta take a look at this.

[bluwy]

I believe setting define: { 'import.meta.env.MY_VAR': JSON.stringify(process.env.MY_VAR) } could be a workaround at the meantime. There's currently progress on improving env vars in #5105

[maxcountryman]

I believe setting define: { 'import.meta.env.MY_VAR': JSON.stringify(process.env.MY_VAR) } could be a workaround at the meantime.

Unfortunately this also does not work. In either case, the interpolation does actually happen in Cloudflare's build environment.

I think this did work at one point, because at least one other person mentioned this issue and presumably it was working at one point prior to that. However I'm not sure if the issue is that something in Astro changed or something in CF's build pipeline changed (or perhaps something else entirely).

[AirBorne04]

@maxcountryman in my testings it is all working as expected i set a SECRET env var in the dashboard and added

vite: {
    define: {
      "process.env.SECRET": process.env.SECRET,
    }
}

to the astro.build file and placed const SECRET = "process.env.SECRET" into an .astro file to save the value.

can you move the minimal example somewhere where i can access it? (or do i need to do something in discord to see it? I am new to discord 😄 )

[maxcountryman]

How exactly are you accessing process.env.SECRET in your code?

In my example, we're accessing it in a plain JavaScript file which is executed via SSR.

Also bear in my mind that you cannot inspect the compiled code directly when CF builds it so can you explain how you're confident the interpolation actually happened during that process and is present in the code after?

I've tried this many times many different ways and it definitively does not work.

[AirBorne04]

How exactly are you accessing process.env.SECRET in your code?

as mentioned, i placed const SECRET = "process.env.SECRET" into an .astro file to access the value.

In my example, we're accessing it in a plain JavaScript file which is executed via SSR.

Does that mean a Cloudflare function (no Astro?)

Also bear in my mind that you cannot inspect the compiled code directly when CF builds it so can you explain how you're confident the interpolation actually happened during that process and is present in the code after?

I logged the values from the process env during the astro build and also printed them in the resulting page.

I've tried this many times many different ways and it definitively does not work.

I believe you, but as mentioned a couple of times, i do not have access to your minimal, so it is difficult to get what exactly you are trying, maybe you can make a repo or stackblitz?

[maxcountryman]

Can you please share the code you used?

I would not expect a string literal to work in the way you're saying so I'm actually quite confused by your comment.

If you want to share you test code I can use that to demonstrate the issue I'm seeing.

[AirBorne04]

i put an example together.

I would not expect a string literal to work in the way you're saying so I'm actually quite confused by your comment.

It is just a little variation of the official docs example.

[matthewp]

@bluwy assigning to you. maybe not a bug here, just to follow up on and close once resolved.

[bluwy]

I think this is similar to #5301, but the define should handle this issue. Perhaps it wasn't replaced right, but anyways #5301 should also fix this without the define config anymore.