How to get boolean env var as per ImportMetaEnv

[axelboc]

I'm using TypeScript and am confused about type ImportMetaEnv allowing for custom env vars to have type boolean:

interface ImportMetaEnv {
  [key: string]: string | boolean | undefined
  BASE_URL: string
  MODE: string
  DEV: boolean
  PROD: boolean
  SSR: boolean
}

I've tried setting a variable VITE_TEST to 0, 1, true and false but when I log its type in my app, I always get string.

If env vars are always string or undefined, then boolean should probably be removed from the union to avoid any confusion and potentially simplify type guards.

[DiederikvandenB]

For whomever is running into this, I fixed it with this little plugin:

function parseEnvironmentVariables() {
  let config;

  return {
    name: 'parse-environment-variables',

    configResolved(resolvedConfig) {
      config = resolvedConfig
      const env = config.env;

      config.env = Object.keys(env).reduce((a, b) => {
        let parsed = config.env[b];

        try {
          parsed = JSON.parse(config.env[b])
        } catch {}

        return ({
          ...a,
          [b]: parsed,
        });
      }, {});

      return config;
    },
  }
}

It runs over the variables in the config and tries to parse them as JSON. If that does not work, we revert back to the stringified value.

[echofly]

This method only works in the dev environment, not after build

[kamikazePT]

@echofly noticed the same, test environment is also different but I was able to workaround it.
for the build, I'm still struggling with a solution

[niku98]

I just wrote a plugin workaround this issue. You can try it out.
https://www.npmjs.com/package/@niku/vite-env-caster

[rkrisztian]

Array.prototype.reduce is the lowest-level higher-order function kind in functional programming, Typically it's the least readable one, and if there is something more suitable we should make use of it. Here's how I modified your code:

function parseEnvironmentVariables() {
  return {
    name: 'parse-environment-variables',

    configResolved(config) {
      config.env = Object.fromEntries(
          Object.entries(config.env).map(([name, value]) => {
            let parsedValue = value;
            try {
              parsedValue = JSON.parse(value as string);
            } catch {
              // revert to string value
            }
            return [name, parsedValue];
          })
      );

      return config;
    },
  };
}

By the way, the vite-env-caster plugin is probably better (may be safer too), but at least we should copy-paste cleaner code.

[scottopherson]

vite/packages/vite/src/node/config.ts

Lines 1088 to 1105 in 09c4fc0

	const parsed = dotenv.parse(fs.readFileSync(path), {
	debug: process.env.DEBUG?.includes('vite:dotenv') || undefined
	})
	// let environment variables use each other
	dotenvExpand({
	parsed,
	// prevent process.env mutation
	ignoreProcessEnv: true
	} as any)
	// only keys that start with prefix are exposed to client
	for (const [key, value] of Object.entries(parsed)) {
	if (
	prefixes.some((prefix) => key.startsWith(prefix)) &&
	env[key] === undefined
	) {
	env[key] = value

dotenv.parse returns values as strings:
https://github.com/motdotla/dotenv/blob/578574c6a7ee5c662d27c26df82b30fd11a2a647/lib/main.d.ts#L4-L6

There's no casting to booleans or other types: motdotla/dotenv#544

So seems like userEnv values should be typed as string | undefined similar to before 46813b7

[DimitrijeD]

This is still a problem ...

[JoeTheCookie217]

up

[dir]

My first foray into Vite and just ran into this, not a great look that you can type the env vars but they aren't actually handled.