Uncaught ReferenceError: process is not defined 에러

Daehyeon Yun·2024년 8월 7일

⚠️Uncaught ReferenceError: process is not defined 에러 발생

Firebase를 이용하여 개발하던 중, API Key를 암호화시키기 위해 dotenv 패키지를 설치하여 진행하던 중 아래와 같은 오류를 접하였다.

Uncaught ReferenceError: process is not defined

~~firebase sdk에서 오류난줄알고 재설치만 3~4번~~

해당 오류는 dotenv 패키지가 Node.js에 있는 process 객체를 사용하려고 해서 발생한다고 한다.

dotenv 는 서버 측(Node.js) 라이브러리입니다. 환경변수를 .env 파일에서 읽어와 process.env 에 할당하는 데 사용하며 이는 Node.js 런타임에서만 사용할 수 있습니다. 브라우저 환경에서는 process 객체가 없기 때문에 오류가 발생합니다.

나는 아래와 같이 코드를 작성했다.

// firebase.ts
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

// .env 환경변수 호출
import * as dotenv from 'dotenv';
dotenv.config();

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: import.meta.env.VITE_API_KEY,
  authDomain: import.meta.env.VITE_AUTH_DOMAIN,
  projectId: import.meta.env.VITE_PROJECT_ID,
  storageBucket: import.meta.env.VITE_STORAGE_BUCKET,
  messagingSenderId: import.meta.env.VITE_MESSAGING_SENDER_ID,
  appId: import.meta.env.VITE_APP_ID
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

// firebase Authentication 사용
export const auth = getAuth(app);

이렇게 코드를 작성한 의도는 git에 파일을 업로드할 때 API KEY와 같은 중요한 정보가 업로드되지 않도록 하기 위함이었다. 브라우저에서는 환경 변수를 직접 사용할 수 없기에 빌드 시 환경 변수를 주입하는 방법을 사용한다.

Create React APP의 경우 : REACT_APP_* 프리픽스를 통한 환경 변수 주입
Next.JS의 경우 : next.config.js 를 사용
Vite의 경우 : .env 파일과 클라이언트 사이드에서 import.meta.env 를 사용

해당 프로젝트는 Vite를 사용하므로 dotenv 를 삭제한 뒤 import.meta.env 를 사용하도록 변경하였다.

이때, Vite는 .env 파일에 환경변수를 세팅할 때 반드시 VITE_ 접두사를 붙여야 한다.

// .env
VITE_API_KEY="---"
VITE_AUTH_DOMAIN="---"
VITE_PROJECT_ID="---"
VITE_STORAGE_BUCKET="---"
VITE_MESSAGING_SENDER_ID="---"
VITE_APP_ID=":---"

🤔 TypeScript에서 Vite의 `env` 접두사를 사용할 경우 발생하는 문제

위 처럼 변경만 하면 성공하는 줄 알았지만.. 막상 빌드하니 아래와 같은 오류를 뿜어냈다.

Property 'env' does not exist on type 'ImportMeta'.ts(2339)

TypeScript가 import.meta.env 객체에 접근할 때 해당 객체의 타입 정보를 인식하지 못해 발생한 오류이다. 이를 해결하기 위해 import.meta.env 에 대한 타입을 정의한다.

// 1. 프로젝트 루트에 env.d.ts 파일 생성
// src/env.d.ts
interface ImportMetaEnv {
  readonly VITE_API_KEY: string;
  readonly VITE_AUTH_DOMAIN: string;
  readonly VITE_PROJECT_ID: string;
  readonly VITE_STORAGE_BUCKET: string;
  readonly VITE_MESSAGING_SENDER_ID: string;
  readonly VITE_APP_ID: string;
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

그 뒤 tsconfig.json 파일 → compilerOptions 에 "types": ["node", "vite/client"], 을 추가하여 TypeScript가 인식할 수 있도록 연결한다.

{
  "compilerOptions": {
		...,
		"types": ["node", "vite/client"],
  },
  ...
}

🎉 해결

Daehyeon Yun

열심히 살아야지

이전 포스트

React Hook이란?

다음 포스트

Uncaught ReferenceError: process is not defined 에러