environment variables not working

[geddski]

I'm trying to set custom environment variables in snowpack.config.js

packageOptions: {
  env: {
    SNOWPACK_PUBLIC_TEST: "yolo",
      PUBLIC_API_URL: "woot"
    }
},

and reference them in code, but they don't ever show up on import.meta or import.meta.env.

reproduction: https://github.com/geddski/snowpack-env-vars

Anyone know what's up? Snowpack bug, or am I doing it wrong?

Edit: snowpack v 3.0.11

[FredKSchott]

Good question: refer to this documentation: https://www.snowpack.dev/reference/environment-variables

Snowpack grabs env variables directly from your process.env. There are a few ways to add them to your app:

1. Add them before any command: SNOWPACK_PUBLIC_TEST=yolo snowpack dev
2. Add them to the top of your config file: process.env.SNOWPACK_PUBLIC_TEST = 'yolo'; // ... rest of your config file
3. Use a plugin to load from a .env file: https://www.npmjs.com/package/@snowpack/plugin-dotenv

Re-reading the docs, I can see how this could be more clear! Would love anyone to add a PR to clarify that page of the docs

[geddski]

Aha that worked! Thank you so much. Yeah the packageOptions.env docs appear to be wrong. Maybe that was part of v2 and got dropped in v3. In any case I'm unblocked, thanks @FredKSchott!

[trancephorm]

Tried 2nd option, it's too complicated, I don't have a clue how to read variables in single-page plain Svelte app I'm building, tried some things but it seems so complicated. Trying now with plugin-dotenv, but still I don't have a clue how to actually read the content of .env files, is there any help out there, some tutorial about it, I haven't been able to find any?

[haneefkassam]

It's so weird! First off, thanks @FredKSchott and @geddski . I used the reproduction repo to figure it out. What I noticed: when you try in a svelte project (in a JS file) to __SNOWPACK_ENV__, you get an error (that "SNOWPACK_ENV variable is not defined"). However, when you use import.meta.env, snowpack seems to replace that in the code (looking at sources in the chrome developer tools).

So:

#.env
SOME_ENV="some value"

let {SOME_ENV} = import.meta.env;

becomes

let {SOME_ENV} = __SNOWPACK_ENV__;

Turns out this import.meta is only required in *.js files. You can still use __SNOWPACK_ENV__, but you need to add import.meta to the top of the js file before you can use it. You can use the SNOWPACK_ENV variable in *.svelte files without any additional imports.