How to recognize env variables in typescript when using vite?

user_15612541 0
Viewed 2477
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?

vite visual-studio-code typescript reactjs environment-variables
1 Answers

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...
}
user_83353170
Related