71

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

10 Answers 10

154

I had similar problems and solved it by

tsconfig.json

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

Have vite installed as a dev dependency.

1
  • Works with target as es5 too
    – Alex Lord
    Commented Oct 23, 2023 at 19:32
23

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.

3
  • I'm getting ts error which I'm not sure how to fix - All declarations of 'env' must have identical modifiers.
    – hangc
    Commented Feb 9, 2021 at 2:03
  • 1
    Interesting, it's working for me, but I'm still using vite 1.0, maybe this changed with the new vite version 2.0 (I'm actually pretty sure that this might be the issue: github.com/vitejs/vite/blob/…)? Commented Feb 9, 2021 at 16:14
  • 2
    The "modifier" the error is talking about it probably readonly which is missing here.
    – CherryDT
    Commented Feb 4, 2022 at 20:47
16

I got it to work by using the following -

interface ImportMetaEnv {
  VITE_PORT?: string;
  VITE_AUTH_TOKEN?: string;
}
3
  • 1
    Can you shed some light?, like how does env.d.ts be provided to process.env, do you just create the file or do you have to tell vite to load it somewhere?
    – simultsop
    Commented Mar 18, 2021 at 7:20
  • @mentorgashi Only the .d.ts file is needed. There is no need to configure vite
    – hangc
    Commented Mar 22, 2021 at 3:09
  • 1
    I've followed the docs which propose a very similar approach. Did you also have the issue with 'ImportMeta' is defined but never used.eslintno-unused-vars.? How can I solve it? Commented Jan 18, 2022 at 20:48
10

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
}
2
  • 1
    Did you come across an eslint error 'ImportMeta' is defined but never used. eslint(no-unused-vars)? How to solve that? Commented Jan 18, 2022 at 20:53
  • 1
    The URL to this documentation has been updated. Further, env.d.ts should be placed in your src/ directory.
    – lukeic
    Commented May 13, 2022 at 2:59
9

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_',
}
1
  • 1
    Helped a lot. Came here from a project created from scratch. I was missing a types file (in this case, I created env.d.ts in the src/ directory) and it automatically picked up import.meta.env. As a cherry on top, I defined my custom vars, as you did with VITE_CUSTOM_ENV_VARIABLE
    – Mike K
    Commented Dec 14, 2022 at 12:15
3

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

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;

2

I had a similar problem trying to use environment variables using typescript with vite on React js. I solve it on the next way, into the file "vite-env.d.ts" I put the next stuff:

interface ImportMeta {
  env: {
    email: string
    password: string
  }
}
1

The cleanest approach I found was to basically extend their class and add our keys separately:

// env.d.ts

/**
 * Our environment variables.
 * 
 * (See https://stackoverflow.com/a/75272079/3423324)
 */
interface ImportMetaEnvCustom extends Readonly<Record<string, string>> {
  readonly VITE_API_SERVER_HOST: string,
  readonly VITE_API_SERVER_PORT: string
}

interface ImportMeta extends import('vite/types/importMeta').ImportMeta {
  // additionally pull in the original values from vite, so you won't need <reference types="vite/client" /> any longer.
  readonly env: ImportMetaEnvCustom & import('vite/types/importMeta').ImportMetaEnv
}

In this example the VITE_API_SERVER_HOST and VITE_API_SERVER_PORT are now documented properly.

You also still get to keep the default Vite variables like BASE_URL, as well as other meta.* hints, like e.g. import.meta.glob()

0

For me ImportMeta and ImportMetaEnv must have that exact name to get recognized

tsconfig.json: "compilerOptions": { "types": ["./src/env.d.ts"] }

file: src/env.d.ts

interface ImportMetaEnv extends import('vite/types/importMeta').ImportMetaEnv {
    readonly VITE_API_SERVER_HOST: string,
}


interface ImportMeta extends import('vite/types/importMeta').ImportMeta {
    readonly env: ImportMetaEnv
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.