[Discussion] import.meta.env 사용 시 'ImportMeat' 형식에 'env' 속성이 없습니다. 오류 발생

[hyeonjuuu]

🤔 토론

설명

Vite에서 환경변수 import.meta.env 사용 시 'ImportMeta' 형식에 'env' 속성이 없습니다. TS2339 오류 발생

😀 논의결과와 해결 방법

1. JS파일을 TS로 변경해볼 것.
2. .env.local이 아닌 .env 파일이 필요할까?
3. .env.local의 $VITE_PB_URL/api 코드를 변경해볼 것.
   VITE_PB_API = $VITE_PB_URL/api

---

1. JS 파일을 TS로 변경 후 .env.local 파일의 env에 대한 타입 지정 -> 오류 해결 ❌

interface ImportMeta {
  env: {
    VITE_PB_URL: string;
  };
}

2. .env.local의 $VITE_PB_URL/api 코드에서 $VITE_PB_URL 대신 해당 URL 입력 -> 오류 해결 ❌

3. tsconfig.json 파일에 compilerOptions에 "types": ["node", "vite/client"], 추가 -> 오류 해결 ✔
   

• 아래 링크 참고
  https://js-web.tistory.com/40
  https://vitejs.dev/guide/features.html#client-types

📸 레퍼런스 (선택)

[sy0725]

해당 건으로 마이그레이션 하던중 절대경로에도 문제가 생겼었습니다.

해결하시고 공유해주신걸로 바로 실행해보니 절대경로 또한 해결되었습니다!

[uniS2]

기존 프로젝트 사용시 문제가 없었던 import.meta.env 구문에서 오류가 생겼다 알려주어서 빠르게 확인할 수 있었습니다. 감사합니다 👍

더불어 기존에 첨부했던 해결 방법 블로그 Vite import.meta TS2339 Error 글이 자세하지 않아 새 레퍼런스를 제공합니다!

✅ 레퍼런스

Property 'env' does not exist on type 'ImportMeta' in 3.0.0 #9539.
저희와 같은 이슈로 토론이 이어졌는데 읽어보니 다음과 같은 이유로 유용해서 첨부합니다.

1. Vite 공식 문서 내 Client Types 이라는 문서로 이 항목이 설명되어 있습니다.
2. 해당 이슈를 2가지 방법으로 해결할 수 있습니다.

이 토론의 의견에도 나오지만 다른 방법은 d.ts 파일에 직접 /// <reference types="vite/client" /> 코드를 추가하자 ㅡ 입니다!
공식문서 링크도 첨부하겠습니다. 수고하셨습니다 🤓

---

😀 참고 공식 문서: Client Types | Vite