개요

환경 변수를 설정을 위한 env 파일

해당 페이지에 작성한 대로 env.d.ts 파일을 만들어서 환경 변수를 작성했는데,

unable to resolve path to module '@env’

라는 오류가 발생하였다.

오류 내용

unable to resolve path to module '@env’

⇒ JavaScript 번들러(또는 ESLint)가 @env라는 모듈을 실제 파일 경로로 찾지 못했다는 의미

---

오류 원인?

@env는 실제 파일이 아닌,
react-native-dotenv가 Babel 변환 시 “가짜로 만들어주는 가상 모듈” 이다.

즉, Babel이 빌드 단계에서 .env 의 내용을 보고

import { FIREBASE_API_KEY } from "@env";

이 구문을 실제 문자열로 변환해주는 구조인 것이다.

따라서, 주요 원인을 정리하면 다음과 같다:

원인	설명	해결 방법
① Babel 설정 누락	babel.config.js에 "module:react-native-dotenv" 플러그인이 빠짐	babel.config.js에 설정 추가
② react-native-dotenv 미설치	npm i react-native-dotenv 안 됨	설치
③ 캐시 문제	이전 Babel 설정이 캐시에 남아 있음	expo start -c 실행
④ ESLint 문제 (import/no-unresolved)	Babel은 인식하지만 ESLint는 모듈을 해석 못 함	.eslintrc.js에 "import/core-modules": ["@env"] 추가
⑤ tsconfig에서 타입 정보 인식 안 됨	TS가 @env 모듈을 모름	env.d.ts 생성 또는 @types/react-native-dotenv 설치

필자의 경우, 대부분의 방법을 시도해도 해결이 되지 않아 5번의 방식을 사용하였다.

타입 패키지 설치

이 방법은 공식 DefinitelyTyped 저장소에서 제공하는 타입 선언 패키지를 설치해서 자동으로 인식시키는 방식이다.

1. 타입 패키지 설치

npm i -D @types/react-native-dotenv

터미널에 다음의 내용을 입력하여 타입 패키지를 설치한다.

2. tsconfig.json 수정하기

TypeScript가 @env를 찾을 수 있도록 경로를 명시적으로 추가해야 한다.

따라서, tsconfig.json에 다음과 같은 내용을 추가한다.

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "src/*": ["src/*"],
      "root/*": ["./*"],

      // '@env'를 'react-native-dotenv' 모듈에 매핑
      "@env": ["node_modules/react-native-dotenv"]
    }
  }
}

해당 설정까지 마쳤다면 이제 따로 env.d.ts를 만들지 않아도 @env 모듈을 바로 사용할 수 있게 된다.