[ React / vite ] .env가 vite.config.tx에서 적용되지 않을때

vite .env 보통은 아래 처럼 적용 가능하다.

 

 

 

 

env를 선언이 필요하다.

 

default defineConfig(({ mode }) =>{...}를 통해서

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

설정

 

vite.config.tx

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


// https://vitejs.dev/config/
export default defineConfig(({ mode }) =>{

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

  return{
    build: {
      sourcemap: true, // Source map generation must be turned on
    },
    plugins: [
      // Put the Sentry vite plugin after all other plugins
      sentryVitePlugin({
        org: "real-world-pudding",
        project: "conf-unconf2024",
        authToken: env.VITE_SENTRY_AUTH_TOKEN,
      }),
      react(),
    ],
  }
})

 

 

 

vite-env.d.ts 설정

 

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

interface ImportMetaEnv {

readonly VITE_APP_TITLE: string;

readonly VITE_SENTRY_AUTH_TOKEN: string;

// Add other environment variables here...

}

interface ImportMeta {

readonly env: ImportMetaEnv;

}

 

 

 

두 개의 설정이 끝나면 .env 사용이 가능하다.