Vite import.meta TS Error : ImportMeta 형식에 env 속성이 없습니다.

Vite import.meta TS Error : ImportMeta 형식에 env 속성이 없습니다.

 

 

supabase 의 KEY 를 사용하던 중 env 타입 에러가 발생했다.

ImportMeta 형식에 env 속성이 없다는 에러였다.

찾아보니 이 문제를 해결하는 다양한 방법이 있었다. 하지만 내 프로젝트에서의 문제는 단순한 파일 경로 문제였다.

 

 

다양한 해결 방법들

vite-env.d.ts

`vite-env.d.ts` 파일에 ImportMeta 인터페이스를 정의한다.

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

interface ImportMetaEnv {
  readonly VITE_SUPABASE_KEY: string;
  readonly VITE_API_KEY: string;
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

 

tsconfig.json

`tsconfig.json` 파일에서 `vite/client` 옵션이 설정되었는지 확인한다.

{
  "compilerOptions": {
    "types": ["vite/client"]
  }
}

 

문제 해결 과정

내 프로젝트에서 문제였던 점

내 프로젝트에서 문제였던 점은 바로 파일의 경로였다.

`import.meta.env.[KEY]` 를 사용하는 `config 파일`을 src 폴더와 같은 최상위 디렉토리에 저장한 것이었다.

다른 config 파일들도 최상위 디렉토리에 있어서 같은 곳에 저장한 것이 문제였다.

결국,

config 파일을 src 디렉토리 하위로 옮겨주니 정상적으로 env 를 인식했다.

 

 

 

[React, Vite] Vite 에서 .env 환경변수 사용하기