Astro Env variable error when used in a page but works in component

Question

First time using Astro so I'm still figuring out my way around

I can call import.meta.env.SOME_VARIABLE in astro components with no issue, but calling import.meta.env.SOME_VARIABLE, even just in a console.log(), in any page results in an error.

Unterminated string literal 

or

Unterminated regular expression

Depending on what line number the env file is called on, one of the above errors will occur, leading me to think it's inserting some text or code into the existing code?

Again, no issue with calling env within an astro component, but the error occurs on all astro pages. Both pages and components are rendered server-side.

The root directory looks like this:

src
ー　pages
ー　components
astro.config.mjs
.env.local
.env.development
.env.production

Tried:

• set to be a client-side public variable (PUBLIC_SOME_VARIABLE), but same error.
• called process.env.PUBLIC_SOME_VARIABLE instead of import.meta.env, but it returned undefined as expected.

While I've found a workaround for now using the env variable in an astro component, I expected to be able to reference env variables in pages using import.meta.env

https://docs.astro.build/en/guides/environment-variables/

Answer 1

I had the same issue and spend a lot of time on it, until I realized I had const myVar = import.meta.env.MY_VAR above imports. Moving the variable initialization below imports solved my problem