Typescript Types for import.meta.env

user_5579871 0
Viewed 20353

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;
    }
  }
}
vite vue.js typescript
7 Answers

I had similar problems and solved it by

tsconfig.json

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

Have vite installed as a dev dependency.

user_6180990
user_41295870

I got it to work by using the following -

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

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
}
user_38238150

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
  }
}
user_29632610

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_',
}
user_82106330

I faced that the example from vite's docs doesn't work if you need to import another type.

Say VITE_CUSTOM_ENV_VARIABLE is of type MyCustomType.

interface ImportMetaEnv {
  readonly VITE_CUSTOM_ENV_VARIABLE: import('./<your_path>/MyCustomType').MyCustomType

  // Optionally describe the original values from vite, needed if you remove <reference types="vite/client" /> line as I did
  readonly BASE_URL: string;
  readonly MODE: string;
  readonly DEV: boolean;
  readonly PROD: boolean;
  readonly SSR: boolean;
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

P.S. I also recommend to remove /// <reference types="vite/client" /> line, because otherwise type of VITE_CUSTOM_ENV_VARIABLE will be MyCustomType or any;

user_162804290
Related