Env variables are not accessed by vite in PROD

[narender2031]

Describe the bug

I am using the docker image for the production build. I have set my environment variables in docker and they are accessible by using env. But when I build the app these are not accessed by Vite.

Please help me here!

Reproduction

Create Svelte kit app by started.

• create the docker image
• Create the env variables in the docker system.
• use the VITE_ as a prefix.

Logs

No response

System Info

Undefined

Severity

blocking all usage of SvelteKit

Additional Information

No response

[Conduitry]

VITE_ variables are bundled during build, not looked at at runtime in prod mode. If your Dockerfile is setting them at app runtime with ENV, this is expected. If that's not what's happening, we need a proper reproduction.

[narender2031]

VITE_ variables are bundled during the build, not looked at runtime in prod mode. If your Dockerfile is setting them at app runtime with ENV, this is expected. If that's not what's happening, we need proper reproduction.

@Conduitry Yes, Dockerfile is setting them at app runtime with ENV.
Do you know any workaround for this.

[narender2031]

@Conduitry

.env

VITE_SOME_ENV=hello

variable.ts

console.log(import.meta.env) // {VITE_SVELTEKIT_AMP: '', BASE_URL: '/_app/', MODE: 'production', DEV: false, PROD: true}
export const variables = {
	SOME_ENV: <string>import.meta.env.VITE_SOME_ENV,
};

NOTE: import.meta.env don't have VITE_SOME_ENV after the build

api.ts

import { variable } from './variable.ts'

const data = variable.SOME_ENV // const data = "undefined "

after the build const data = "undefined " it replaced by undefined.

My docker image already has all the env variable inside the system env. When I build the file my env data is replaced by undefined.

[rmunn]

What happens if you change import.meta.env.SOME_ENV to import.meta.env['SOME_ENV']? I remember a while ago Vite was doing text replacement specifically looking for the text import.meta.env. (with a trailing period), but I haven't looked at it in months and don't know if that's still current Vite behavior. But if import.meta.env['SOME_ENV'] works for you then that could be an easy workaround.

[benmccann]

There should be some improvement on that front with Vite 2.7: vitejs/vite#5404

[bluwy]

I don't think import.meta.env.SOME_ENV or import.meta.env['SOME_ENV'] would work, even with Vite 2.7. import.meta.env is a per-file variable and replacements must be done during build-time. .env files wouldn't work as well so we'd need a different strategy for this, here's two options:

1. Have a separate build script in docker that generates a static JS file, which would be imported by app.html.

// env.js
window.__MY_ENV__ = "something"

// your-code.js
console.log(__MY_ENV__)

Keep in mind that you need to shim it in dev and SSR if needed, possible with kit.vite.define.

2. Or have a separate build script that does a find+replace on the final build assets.

[IsaacHub]

vite looks like a horrible absurd bundler considering the number of issues and how childish and absurd those issues are. This vite nonsense is ruining the reputation of sveltekit. It's the only thing preventing the release of sveltekit. What a shame!

svelte team made a terrible mistake by choosing an incompetent bundler.

[bluwy]

@IsaacHub This issue has nothing to do with Vite, it's a common problem across any other bundlers like webpack, rollup, snowpack, so it's misleading to belittle Vite here. Plus, Vite 2.7 has solved many SSR issues, the majority of issues left are within SvelteKit itself. Vite is here to stay.

[bartosjiri]

@benmccann Tried upgrading to 1.0.0-next.202, variables are still undefined with import.meta.env.VAR_KEY and import.meta.env['VAR_KEY'] when provided through Docker.

Reproduction repo available here.

[korywka]

Sort of duplicate: #3030

[benmccann]

Please see the environment variable FAQ: https://kit.svelte.dev/faq#env-vars

To use at runtime you'll need to instantiate yourself (see svelte.dev's hooks.js for an example). You can then pass to your templates using session

[narender2031]

@benmccann Can you please share an example here. I didn't found anything helpful here yet