Sveltekit + Typescript: Environment variables build error

Question

I want to use environment variables in my Sveltekit app - it works fine on dev server, but I get this build error:

Error: 'PUBLIC_KEY' is not exported by $env/static/public, imported by src/routes/+layout.svelte

So Svelte has this module that helps with env stuff: https://kit.svelte.dev/docs/modules#$env-static-public

I have a simple .env file like this:

PUBLIC_KEY=123

Now the IDE throws the same type error like the build error, but I can fix that by adding this to my types.d.ts file:

declare module '$env/static/public' {
    export const PUBLIC_KEY: string;
}

Now the type error in my IDE is gone, for testing I just add this to my +layout.svelte file:

<script lang="ts">
    import { PUBLIC_KEY } from '$env/static/public';

</script>
<div>{ PUBLIC_KEY }</div>

The content 123 is rendered on dev server, so it works. However, if I run npm run build, the error from above occurs. Even putting a @ts-ignore above the import doesn't help. So my question is: what do I have to do to make TS play along?

Stiegi · Accepted Answer · 2024-12-04 11:19:18Z

72

I found the answer - in a comment of the PR for that feature. Would be nice if that was in the documentation.

However, for those who face that issue and land here: you have to run svelte-kit sync - it will create a type file based upon your .env files. You can use npm run check - this includes the sync command.

You don't need to write the types yourself like I did in my question! Just run npm run check (make sure that the corresponding .env file exists when doing so).

edited Dec 4, 2024 at 11:19

answered Sep 27, 2022 at 12:27

Stiegi

1,8871 gold badge18 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Leon Over a year ago

@TomaszPlonka Did you forget to copy the .env file in your Dockerfile?

Stiegi Over a year ago

sure: github.com/sveltejs/kit/pull/5663#issue-1313924415

Leon Over a year ago

For me the svelte-kit sync was not present, but running npx @sveltejs/kit sync helped

Alexander Suraphel Over a year ago

npm run check worked for me. svelte-kit sync didn't do anything however.

thib Over a year ago

Running npm run check works for me and add the env variable to .svelte-kit/ambient.d.ts in declare module '$env/static/private' correctly but when I then run npm run build, it removes the variable from it... any clue why?

|

jhickok · Accepted Answer · 2024-12-04 03:42:35Z

2

This problem still exists for me in Dec 2024.

Only way I could solve the error was to add this to tsconfig.json at the root level.

"include": [
    "./src",
    ".svelte-kit/ambient.d.ts" // added this
]

answered Dec 4, 2024 at 3:42

jhickok

9999 silver badges12 bronze badges

Comments

haiba · Accepted Answer · 2025-03-13 03:52:46Z

0

I tried running npm run check; still got the error. Tried adding the ".svelte-kit/ambient.d.ts" line to the tsconfig; still got the error. Tried both in tandem and still got the error! I had to add an env.d.ts file to make the errors go away. In terms of build errors, I am pretty far from production-ready at this point, but a cursory npm run build didn't show any errors popping back up.

answered Mar 13 at 3:52

haiba

2211 gold badge3 silver badges9 bronze badges

Comments

lkostka · Accepted Answer · 2023-11-06 15:28:17Z

-2

Alternative solution, check whether or not your env variable is prefixed with 'PUBLIC'. If yes, you can import it from the module '$env/static/public'. If not, you can import it from the module '$env/static/private'

answered Nov 6, 2023 at 15:28

lkostka

7331 gold badge6 silver badges10 bronze badges

Comments

yavnelf · Accepted Answer · 2024-11-01 11:55:30Z

-2

Quick fix for Svelte 5

<script>
    import { env } from '$env/dynamic/public';
</script>

<main
    style:background={env.PUBLIC_THEME_BACKGROUND}
    style:color={env.PUBLIC_THEME_FOREGROUND}
>
    {env.PUBLIC_THEME_FOREGROUND} on {env.PUBLIC_THEME_BACKGROUND}
</main>

answered Nov 1, 2024 at 11:55

yavnelf

3651 gold badge5 silver badges14 bronze badges

Collectives™ on Stack Overflow

Sveltekit + Typescript: Environment variables build error

5 Answers 5

7 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

7 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related