Update 60-env-vars.md

[DreaminDani]

Vite doesn't use process. it's import.meta

Fixes process not defined errors when using environment variables

@bluwy edit: Explain that import.meta.env. is used for build time.

Please don't delete this checklist! Before submitting the PR, please make sure you do the following:

• It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
• This message body should clearly illustrate what problems it solves.
• Ideally, include a test that fails without this PR but passes with it.

Tests

• Run the tests with pnpm test and lint the project with pnpm lint and pnpm check

Changesets

• If your PR makes a change that should be noted in one or more packages' changelogs, generate a changeset by running pnpx changeset and following the prompts. All changesets should be patch until SvelteKit 1.0

[changeset-bot]

⚠️ No Changeset found

Latest commit: 69a4e1d

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[Rich-Harris]

import.meta.env is for build time, not run time — I think the existing docs are correct? (Notwithstanding the fact that not every environment exposes process, of course)

[Conduitry]

This is code that, on the server side, isn't changed by Vite at all. It's just process.env.whatever which Vite leaves alone and Node then interprets as it normally would, at runtime.

[Conduitry]

Whoops, I'm on the mobile app and I missed Rich's comment. Yes the import.meta thing is replaced at build time but only for env vars beginning with VITE_. If you want runtime stuff, Vite is not involved.

[DreaminDani]

Interesting. The FAQ is a bit confusing then... If I'm using an environment variable in a .js file, process isn't defined:

/* supabaseClient.js */
import { createClient } from '@supabase/supabase-js';

const supabaseUrl = process.env.VITE_SUPABASE_URL;
const supabaseAnonKey = process.env.VITE_SUPABASE_ANON_KEY;

export const supabase = createClient(supabaseUrl, supabaseAnonKey);

/* src/routes/auth/index.js */
<script>
	import { supabase } from '$lib/supabaseClient';

	let loading = false;
	let email;

	console.log(supabase);
</script>

But if I change process to import.meta, it runs successfully. I'm assuming this means I can only access process from a .svelte file?

[bluwy]

Yeah I think the above paragraph "Vite uses dotenv..." could have mention the import.meta.env.* syntax as that's for build-time replacements. The paragraph later explains for runtime replacements.

I'm assuming this means I can only access process from a .svelte file?

You should be using import.meta.env in your example code. process.env should only be used in server code as that's determined in runtime, as in the browser runtime there's no process.

[DreaminDani]

Ohhh I see! That makes sense. Appreciate the help.

…

On Feb 19, 2022, 20:47 -0700, Bjorn Lu ***@***.***>, wrote: Yeah I think the above paragraph "Vite uses dotenv..." could have mention the import.meta.env.* syntax as that's for build-time replacements. The paragraph later explains for runtime replacements. > I'm assuming this means I can only access process from a .svelte file? You should be using import.meta.env in your example code. process.env should only be used in server code as that's determined in runtime, as in the browser runtime there's no process. — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: ***@***.***>

[bluwy]

Updated the docs to cover the discussion we had. Ready for a quick review.

[Rich-Harris]

much better than what we had before 👍