🐛 BUG: import.meta env variables not working in server-only code fence in Astro component file *.astro?
#2903
Comments
|
For private server side only variables like the Sanity token use For public client side variables use prefix the variable with |
|
Hey, thanks for looking at this and sharing some examples. Do you know why the Sanity ID would be prefixed as client-side when I am only using it on the server in the component script, which should be server-only per the Astro docs? Regardless of the Sanity client, it seems like the non-Sanity-specific env variables in my minimal reproducible example aren't behaving as expected, unless I'm misunderstanding how the Astro component code fence works.
|
riledigital
changed the title
import.meta env variables not working in server-only Astro component file *.astro?
riledigital
changed the title
import.meta env variables not working in server-only Astro component file *.astro?import.meta env variables not working in server-only code fence in Astro component file *.astro?
|
This example might help https://github.com/withastro/astro/tree/main/examples/env-vars |
|
Thanks, but that example doesn't illustrate the problem in my example where I am using env variables within a server-only script imported in the Astro code fence. |
|
@riledigital Looking at your example, I see that the environment variables are all |
|
@natemoo-re Sorry, I added back Here are steps to reproduce:
Netlify log10:21:44 AM: ──────────────────────────────────────────────────────────────── 10:21:44 AM: 1. Build command from Netlify app 10:21:44 AM: ──────────────────────────────────────────────────────────────── 10:21:44 AM: 10:21:44 AM: $ npm run build 10:21:44 AM: > @example/[email protected] build 10:21:44 AM: > astro build 10:21:46 AM: 02:21:46 PM [config] Set "buildOptions.site" to generate correct canonical URLs and sitemap 10:21:46 AM: 02:21:46 PM [build] Initial setup... 10:21:46 AM: 02:21:46 PM [build] Collecting page data... 10:21:47 AM: env variables loading: 10:21:47 AM: { 10:21:47 AM: MY_SERVER_VARIABLE: undefined, 10:21:47 AM: MY_CLIENT_VARIABLE: undefined, 10:21:47 AM: MY_FALLBACK_VARIABLE: 'i am a fallback variable' 10:21:47 AM: } 10:21:47 AM: 02:21:47 PM [build] Completed in 0.90s 10:21:47 AM: 02:21:47 PM [build] Discovering entrypoints... 10:21:47 AM: 02:21:47 PM [build] Building for SSR... 10:21:47 AM: 02:21:47 PM [build] Completed in 0.84s 10:21:47 AM: 10:21:47 AM: generating static routes 10:21:47 AM: env variables loading: 10:21:47 AM: { 10:21:47 AM: MY_SERVER_VARIABLE: undefined, 10:21:47 AM: MY_CLIENT_VARIABLE: undefined, 10:21:47 AM: MY_FALLBACK_VARIABLE: 'i am a fallback variable' 10:21:47 AM: } 10:21:47 AM: src/pages/index.astro 10:21:47 AM: { 10:21:47 AM: MY_SERVER_VARIABLE: undefined, 10:21:47 AM: MY_CLIENT_VARIABLE: undefined, 10:21:47 AM: MY_FALLBACK_VARIABLE: 'i am a fallback variable' 10:21:47 AM: } 10:21:47 AM: ┃ / +13ms 10:21:47 AM: Completed in 33ms 10:21:47 AM: 10:21:47 AM: 02:21:47 PM [build] 1 pages built in 1.78s (1777ms avg per page + resources) 10:21:47 AM: 02:21:47 PM [build] 🚀 Done 10:21:49 AM: 10:21:49 AM: (build.command completed in 4.9s) 10:21:49 AM:
|
|
@riledigital Thanks for clarifying. I downloaded your example, removed the I tried with one of my Sanity projects by changing |
|
This is my take on this, after being stuck for a couple hours: The env variables you setup with Netlify UI cannot be accessed by Vite, and hence are not accessible with So the first step is to make sure you use a |
|
(Just in case more context is helpful) Currently writing a custom integration, and when Astro is building the client, {
BASE_URL: '/',
MODE: 'production',
DEV: false,
PROD: true,
SSR: true
}Come time to generate static routes, however, and |
|
Have same issue trying to integrate with Datocms. It's not ideal having to access env vars differently based on local/serve build
Not sure what the answer is at moment. Or if Netlify is able to pick this up as a bug to fix their end for astro projects. Just commented to add support for this issue. |
natemoo-re
added
- P4: important
|
Okay, definitely some weird behavior here. I'm going to take a look at this and try to fix it. |
Now that withastro/astro#2903 has been fixed, we can remove the workaround of loading from process.env
|
Just to add more info here if anyone else is struggling. We run Astro with I found that when using the |
|
It looks it no longer works, @garethweaver . I have the same setup as you have but I have to use process.env |
|
We're deploying to cloudflare for evaluating some Astro beahaviors and ran into some similar issues with the difference between:
We need runtime configuration that is not exposed to the public. At the moment we fetch an "/app-config.json" through a middleware and make it available to astro using Astro.locals). We actually have two CF workers running for the same project...:
Testsetup: This is our .env.development file: This is our CF environment variable configuration: This is how we try to access (and display) them in our .astro component: This is what we get on localhost: This is what we get on cf worker #1 This is what we get on cf worker #2 Does anyone have any clue on how to explain this? |
|
I had similar issue while using node adapter. For example, with these vars in my .env file: In my .astro files, or my .ts endpoints, middleware or libraries: import.meta.env.PUBLIC_SOMETHING: hello I had to install dotenv and dotenv-cli packages to my project and then add the following lines in my package.json file: Now: import.meta.env.PUBLIC_SOMETHING: hello |
What version of
astroare you using?0.25.2
What package manager are you using?
pnpm
What operating system are you using?
Mac
Describe the Bug
import.metaenv variables not working in server-only Astro component file*.astro?I've noticed a lot of issues in various threads about environment variables in both Astro and in Vite and wanted to chime in with my own issue I've had: it seems currently that I can't access server-side env variables on Netlify builds with the
import.meta.VITE_S_TOKENconvention. My Netlify builds are only running successfully when I useprocess.env.? I'm on Astro0.25.2. The builds fail because the JS client fails when passing in an undefined clientId (but the issue isn't with the client)I'm using a server-only
sanityClient.jsclient js file to fetch data from a CMS and setting up the js client using env variables set through the Netlify UI.However, using
process.envbreaks my localastro devprocess, where the env vars show up undefined. I have tried using a fallback likeimport.meta.VITE_S_PROJECT_ID ?? process.env.VITE_S_PROJECT_IDbut that doesn't work either, and I'd really like to have both Netlify builds and local dev runs work properly.Gnarly closed thread on Vite about a similar issue
Example Netlify deploy
Expected text: hello my server variable
Hello my client variable
Actual: Blank
Deploy link
Link to Minimal Reproducible Example
https://stackblitz.com/edit/github-crbayc?file=src/client.js
Participation
The text was updated successfully, but these errors were encountered: