vite: importMetaEnv doesn't work.

Recommended in docs way to add types causes build problem:

interface ImportMetaEnv extends Readonly<Record<string, string>> {
  readonly VITE_VAR: string
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

▶ pnpm build

> test@0.0.0 build /test
> vue-tsc --noEmit && vite build

node_modules/.pnpm/vite@2.6.13/node_modules/vite/types/importMeta.d.ts:62:11 - error TS2430: Interface 'ImportMetaEnv' incorrectly extends interface 'Readonly<Record<string, string>>'.
  'string' index signatures are incompatible.
    Type 'string | boolean | undefined' is not assignable to type 'string'.
      Type 'undefined' is not assignable to type 'string'.

62 interface ImportMetaEnv {
             ~~~~~~~~~~~~~


Found 1 error.

 ELIFECYCLE  Command failed with exit code 2.

This works

interface ImportMetaEnv extends Readonly<Record<string, string | boolean | undefined>> {
  readonly VITE_VAR: string
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

@imShara I can confirm this 👍

Correct would be without extends Readonly<Record ... and maybe I think with the ///ref

/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_VAR: string
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

Could you try

interface ImportMetaEnv {
  readonly VITE_API_TIMEOUT: number;
  readonly VITE_MOCKUP: boolean;
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

@erdemtuna I used “?” on the env variable name. As mentioned here:

https://stackoverflow.com/questions/66039933/typescript-types-for-import-meta-env

I don’t think the types are converted by default. You have to do it yourself.

I think the env.d.ts is just a way to fight annoyance of import.meta.env values being typed as string | boolean | undefined, when it mostly should be string | undefined. Sadly, it’s because there are DEV and PROD keys in import.meta.env that are booleans. I think there could be fix introduced, but it’s not yet done - anyway, it would just make the defining own ImportMetaEnv unnecessary, the values still would be string | undefined.

Anyway, the solution is to convert the types by yourself.

If you want some inspiration for now, I use it like this in my project: config.ts, website sources:

const parseBoolean = (value: string | boolean | undefined, defaultValue: boolean) => {
	if (typeof value === 'undefined') {
		return defaultValue;
	}
	if (typeof value === 'boolean') {
		return value;
	}
	switch (value.toLowerCase().trim()) {
		case "true": case "yes": case "1": return true;
		case "false": case "no": case "0": return false;
		default: return defaultValue;
	}
}

const Config = {
	isDev: import.meta.env.DEV,
	firebaseConfig: {
		apiKey:                 import.meta.env.VITE_FIREBASE_API_KEY,
		authDomain:             import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
		databaseURL:            import.meta.env.VITE_FIREBASE_DATABASE_URL,
		projectId:              import.meta.env.VITE_FIREBASE_PROJECT_ID,
		storageBucket:          import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
		messagingSenderId:      import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
		appId:                  import.meta.env.VITE_FIREBASE_APP_ID,
		measurementId:          import.meta.env.VITE_FIREBASE_MEASUREMENT_ID,
	},
	useEmulators: parseBoolean(import.meta.env.VITE_USE_EMULATORS, import.meta.env.DEV),
};

export default Config;

env.d.ts:

interface ImportMetaEnv {
	VITE_FIREBASE_API_KEY:              string | undefined;
	VITE_FIREBASE_AUTH_DOMAIN:          string | undefined;
	VITE_FIREBASE_DATABASE_URL:         string | undefined;
	VITE_FIREBASE_PROJECT_ID:           string | undefined;
	VITE_FIREBASE_STORAGE_BUCKET:       string | undefined;
	VITE_FIREBASE_MESSAGING_SENDER_ID:  string | undefined;
	VITE_FIREBASE_APP_ID:               string | undefined;
	VITE_FIREBASE_MEASUREMENT_ID:       string | undefined;

	VITE_USE_EMULATORS:                 string | undefined;

	VITE_WEBSITE_URL:                   string | undefined;

	VITE_APP_LOCALHOST_PORT:            string | undefined;
	VITE_WEBSITE_LOCALHOST_PORT:        string | undefined;
}

My code base imports Config where necessary, it have types nicely converted.