Property 'env' does not exist on type 'ImportMeta' 해결 (feat. Vite)

 

 

해당 오류는 env의 속성을 인식하지 못해서 발생하는 에러이다.

Vite + TS 환경에서 환경 변수 사용을 위한 세팅을 해보자.

 

 

 

 

1. .env 파일을 프로젝트 루트에 생성 후 VITE_로 시작하는 변수에 값을 할당한다.

VITE_SERVER_URL = https://test.app

 

 

 

2. env.d.ts 파일을 프로젝트 루트에 생성 후 환경 변수의 타입을 선언한다.

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

 

 

 

3. tsconfig.json compilerOptions에 옵션을 추가한다.

"types": ["vite/client"],

 

 

 

4. vite.config.ts

import { defineConfig, loadEnv } from 'vite';
import react from '@vitejs/plugin-react';

const env = loadEnv(process.env.NODE_ENV, process.cwd(), '');

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],

  server: {
    proxy: {
      '/api': {
        target: env.VITE_SERVER_URL,
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
  build: {
    chunkSizeWarningLimit: 600,
  },
});

 

 

*** 만약 process를 불러오지 못하면,

npm i --save-dev @types/node