[react] .process.env.REACT_APP_KEY undefined

문제 상황

 

 

드림코딩 강의를 들으면서 

 

분명히 하라는 대로 했는데 계속해서 문제가 생겼다.

 

firebase도 일부러 다운그레이드를 해서

버전 7로 실행했는데.

 

계속 process.env.REACT_APP_FIREBASE_API_KEY가 undefined라는 것

 

key 값이 잘못되었나 확인을 하고

.env 파일에서 값을 복붙해 컴포넌트에 직접 담았을 때는 정상적으로 작동되었다.

 

따라서

key값에는 문제가 없고,

_FIREBASE_API_KEY 뿐만 아니라 .env 파일에 담아둔 키들이 활동을 못하는 것 같았다

 

 

해결방법

 

 

일단 맨 처음 할 일은

.env파일에 ,를 넣은 것은 아닌지 살펴보고 

.env파일을 root에 생성한 것이 맞는지 다시 확인한다.

 

아무리 해도 코드에 문제가 없다면

 

'dotenv'를 설치하면 된다

 

 

1. dotenv를 설치한다

yarn 이용 : yarn add dotenv
npm 이용 : npm install --save dotenv

 

 

2. 사용하고자 하는 컴포넌트에 아래 코드를 추가한다 

import dotenv from "dotenv";
require("dotenv").config();

 

 

dotenv

https://www.npmjs.com/package/dotenv