How to recognize env variables in typescript when using vite?

Question

export const EnvironmentProvider: React.FC<EnvironmentProps> = ({ children }) => (
  <EnvironmentContext.Provider value={{
    APP_NAME: import.meta.env.VITE_APP_NAME, 
    GQL_URI: import.meta.env.VITE_GQL_URI
  }}>
    { children }
  </EnvironmentContext.Provider>
)

when using import.meta to load env variables vscode only recognize url variable... so how i can tell typescript that there are custom variables in import.meta?

Answer 1

Maybe this is what you want 智能提示, but only Chinese website has the section now.

In a word, you can create /src/env.d.ts like this:

interface ImportMetaEnv {
  VITE_APP_NAME: string;
  VITE_GQL_URI: string;
  // others...
}

Answer 2

as you would normally do with react project , create .env file in your root project and put .env in .gitignore so that you don't push important data on git by mistake .

next thing to do is that defining variable with prefix VITE instead of REACT_APP , like below

VITE_BASE_URL=http://localhost:7000
VITE_DB_PASSWORD=123

when you are done with defining your environment variable , you can use them in the project like this

export const BASE_URL = `${import.meta.env.VITE_BASE_URL}/api`

run the project and it should be working , otherwise stop the server and restart , it should solve your problem .

if you think that your problem is still not solved , you should checkout vite doc : https://vitejs.dev/guide/env-and-mode.html

Answer 3

From the docs: https://vitejs.dev/guide/env-and-mode.html#intellisense-for-typescript

You need to create a file env.d.ts in your src directory (I created it in my root and it worked fine) with:

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

interface ImportMetaEnv {
  readonly VITE_YOUR_ENV_VAR_1: string
  readonly VITE_YOUR_ENV_VAR_2: string
  // more env variables...
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

"If your code relies on types from browser environments such as DOM and WebWorker, you can update the lib field in tsconfig.json" (but I didn't need this for my project)

{
  "lib": ["WebWorker"]
}

And then usage:

const uri import.meta.env.VITE_URI as string // I found that I still needed to type the imported var to get around https://typescript-eslint.io/rules/no-unsafe-assignment/ 

or in your example I think it would be:

export const EnvironmentProvider: React.FC<EnvironmentProps> = ({ children }) => (
  <EnvironmentContext.Provider value={{
    APP_NAME: import.meta.env.VITE_APP_NAME as string, 
    GQL_URI: import.meta.env.VITE_GQL_URI as string
  }}>
    { children }
  </EnvironmentContext.Provider>
)

Answer 4

You can try using this package: https://www.npmjs.com/package/@niku/vite-env-caster

This package generate types from your env file and cast environment variables to real type.