search

FRONTENDSCHOOL6 / WonT

멋쟁이사자처럼 프론트엔드스쿨 6기 10조 "✈️여행 플래너" 프로젝트
https://weontrip.vercel.app
0 stars 3 forks source link

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

Open hyeonjuuu opened 9 months ago

hyeonjuuu commented 9 months ago

🤔 토론

설명

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

image

😀 논의결과와 해결 방법

  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"], 추가 -> 오류 해결 ✔ image

📸 레퍼런스 (선택)

sy0725 commented 9 months ago

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

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

uniS2 commented 9 months ago

기존 프로젝트 사용시 문제가 없었던 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 Client Types