DEV Community

Using environment variables in SvelteKit (and Vite)

Dana Woodman on April 05, 2021

UPDATE August 8, 2022: SvelteKit now has support for both private and public environment variables without directly using Vite, so please refer to ...

Read full post

p6gb • Apr 8 '21

This works fine with the svelte-kit dev script but crashes svelte-kit build with the following error: [rollup-plugin-dynamic-import-variables] Unexpected token (6:265) which points to the line where I use the imported variable in a .svelte file. Any idea why?

Tim Deschryver • Apr 29 '21

This is probably because your svelte component includes a style tag?
timdeschryver.dev/blog/environment...

p6gb • Apr 30 '21

That might have been it. I am now adding the env variables to session in a hook:

export function getSession() {
    return {
        API_ENDPOINT: import.meta.env.VITE_API_ENDPOINT
    };
}

Tim Deschryver • Apr 30 '21

That's smart!

Dana Woodman • Apr 9 '21

It crashes for you on npm run build? It is working fine for me on a fresh SvelteKit project, maybe you can try from scratch to eliminate variables? Do you have a specific adapter you're using?

Amaseal • Oct 28 '21

some might still get errors like this even when applying Tim Deshryver's fix, apparently you cant just comment out old code that used this solution

Jose Rafael • Apr 9 '21

Thanks for the post! Quick question, why would I declare any other variable besides VITE_* if I cant access it in endpoints. What if I have sensitive credentials that I need in an endpoint.

Dana Woodman • Apr 9 '21

Great question, I don't know the reason Vite went this way ultimately, but I would assume you could have sensitive variables in .env and then import them where you need using dotenv or similar. Since Vite isn't designed for Svelte, it likely doesn't know if it is running in an endpoint vs a component, so I think that may be the root cause. Maybe you can prefix your private vars in a way so you don't accidentally like vars, like VITE_PRIVATE_SOME_SECRET_TOKEN?

jj_skit • Oct 22 '22

Oct 2022. Using Vite/Svelte not Sveltekit and ES6 and dotenv is just not playing ball. Thanks for this post. Wish I had seen it three hours ago! Your suggestion here to prefix VITE and use import.meta.env.VITE worked! Thank you.

Dmitry Nagorny • Jun 3 '21

Same questions I had when just learned VITE_ concept. I'm not alone :)

Anthony Gushu • Jul 19 '21

Thank you! This helped me figure out the issue I was having when trying to import .env vars into my endpoints.

The SvelteKit project init had set the ecma version in my eslint parserOptions to 2019. Changing that to 2020 and defining the compilerOptions in my jsconfig.json fixed the issue.

Dana Woodman • Aug 9 '21

Glad I could help!

jj_skit • Oct 22 '22

Thanks for this. Using Vite 3.1.0 with Svelte 3.49.0, trying (unsucessfully so far) to get connected to Mongodb without using an Express server. Ran around in circles before I started checking line by line thinking it was mongodb npm package or mongoose, but then realizing it was dotenv not complying. Your solution here worked in that regards.
I wanted to ask you, using import.meta.env.VITE_MESSAGE, works fine in development but how do you use that in production? For example on hosts that allow for environment/config variables, can you simply set these on the host and import.meta.env will pick them up same was as if they were in an .env file?

Manuel Sommerhalder • Apr 8 '21

Awesome article, now I'm even more excited to try out SvelteKit!

Dana Woodman • Apr 9 '21

Awesome! That's the type of stuff I love to hear! 🤓

jmpark6846 • Sep 18 '21

thanks for this article. It was confusing to understand but now it became clear