Importing environment variables with Netlify deploy?

[alancwoo]

Locally, I'm importing an environment variable from .env.local with import { PUBLIC_API_ROOT } from '$env/static/public';

On Netlify, I've set the PUBLIC_API_ROOT environment variable, but the build fails:

12:46:18 PM: "PUBLIC_API_ROOT" is not exported by "$env/static/public", imported by "src/routes/+page.js".
12:46:18 PM: file: /opt/build/repo/src/routes/+page.js:1:9
12:46:18 PM: 1: import { PUBLIC_API_ROOT } from '$env/static/public';
12:46:18 PM:             ^
12:46:18 PM: 2:
12:46:19 PM: Failed during stage 'building site': Build script returned non-zero exit code: 2 (https://ntl.fyi/exit-code-2)
12:46:18 PM: 3: export const load = async ({ fetch }) => {
12:46:18 PM: error during build:
12:46:18 PM: RollupError: "PUBLIC_API_ROOT" is not exported by "$env/static/public", imported by "src/routes/+page.js".

From my searches, I've found an article such as Using secure environment variables in SvelteKit and Netlify which recommends installing and implementing dotenv which seems somewhat counter to the environment functionality recommended in the tutorial and was also written a few years ago.

A comment in the article recommends prefixing environment variables with VITE_ but the link doesn't seem to point to anything and is also didn't work, I'm just curious if I'm missing something obvious here or if a more involved setup is required to bring Netlify's environment variables into the build?

[Devr-pro]

Well this looks something new, I too have setup env variables on netlify ui and it works just fine, have you tried to clear cache and deploy the site ?

[alancwoo]

Thanks for the response! Yes I've tried clearing cache/redeploying, out of curiosity how are you naming your environment variables on Netlify and how have you imported them in your app?

[Devr-pro]

I have named the variables just the way my app imports it e.g - PUBLIC_API_KEY
and importing as import {PUBLIC_API_KEY} from '$env/static/public'

[alancwoo]

Hmmm. Ok, I was using adapter-auto but after explicitly installing and importing adapter-netlify it works.

Then as a test, I removed the netlify adapter, reverted to auto and pushed and Netlify was still able to build it, so I'm really not sure why it's just working again now.

🤷🏻‍♂️

[yonnic]

i have the same problem and this only happen on first deployment, after you re-run the build it will work.
Looks like netlify does not import the ENV variables in time for the first build to work and only on the upcoming builds it has access to the ENV variables.

Is there any way to make the ENV variables in sveltekit optional and set a default variable in case there is no such ENV ?

[jfbn]

I don't know if this is what you're asking about, but you can try to load the ENV variable in a separate helper.
I have this config.js file:

import { PUBLIC_BACKEND_URL } from '$env/static/public';

if (!PUBLIC_BACKEND_URL) {
  throw new Error('PUBLIC_BACKEND_URL is missing or not defined');
}

export default PUBLIC_BACKEND_URL; 

Then I use it later as so:

import PUBLIC_BACKEND_URL from '@config/index';