Typescript Types for import.meta.env

Question

I am now using a framework (vite) that injects environment variables into import.meta.env.

I was previously able to create a file env.d.ts to provide types to process.env

declare global {
  namespace NodeJS {
    interface ProcessEnv {
      GITHUB_AUTH_TOKEN: string;
      NODE_ENV: 'development' | 'production';
      PORT?: string;
      PWD: string;
    }
  }
}

I've tried the following but does not work.

declare global {
  namespace NodeJS {
    interface ImportMeta {
      GITHUB_AUTH_TOKEN: string;
      NODE_ENV: 'development' | 'production';
      PORT?: string;
      PWD: string;
    }
  }
}

Answer 1

I had similar problems and solved it by

tsconfig.json

{
  ...
  "compilerOptions": {
    ...
    "target": "ESNext",
    "types": ["vite/client"]
  }
}

Have vite installed as a dev dependency.

Answer 2

It's documented here: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-9.html#support-for-importmeta

So you're almost there:

interface ImportMeta {
  env: {
    GITHUB_AUTH_TOKEN: string;
    NODE_ENV: 'development' | 'production';
    PORT?: string;
    PWD: string;
  };
}

But be aware that in vite all environment variables have to be prefixed with VITE_ so neither of those environment variables are available in the application.

Answer 3

I got it to work by using the following -

interface ImportMetaEnv {
  VITE_PORT?: string;
  VITE_AUTH_TOKEN?: string;
}

Answer 4

According to the documentation here https://vitejs.dev/guide/env-and-mode.html#intellisense you can do the following:

// env.d.ts
interface ImportMetaEnv extends Readonly<Record<string, string>> {
  readonly VITE_APP_TITLE: string
  // more env variables...
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

Answer 5

If you are using SvelteKit v1.0.0-next.120 and Vite 2.4.0, env must be a property of ImportMeta in global.d.ts. Here's an example:

interface ImportMeta {
  env: {
    VITE_DATABASE_URL?: string
    VITE_WEB_URL?: string
    VITE_BRAINTREE_GATEWAY?: string
    VITE_BRAINTREE_DESCRIPTOR?: string
    VITE_RECAPTCHA_SECRET_KEY?: string
    VITE_EMAIL_FROM?: string
    VITE_EMAIL_ADMINS?: string
    VITE_SEND_IN_BLUE_KEY?: string
    VITE_SEND_IN_BLUE_URL?: string
    VITE_RECAPTCHA_SITE_KEY?: string
  }
}

Answer 6

The URL to this documentation linked to in the answer above has been updated.

Further, env.d.ts should be placed in your src/ directory and you need a reference string at the top of the file.

A complete, working example is as follows:

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

interface ImportMetaEnv {
  readonly VITE_CUSTOM_ENV_VARIABLE: string
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

---

Using a variable prefix other than VITE_

If you don't want to use the default variable prefix, you can change this in your Vite config:

{
  envPrefix: 'YOURPREFIX_',
}