[09/29] [react-ga] gaTrackingId is required in initialize() error

문제

.env에 존재하는 환경변수 envName는 process.env.envName으로 가져올 수 있다.

• 하지만 gaTrackingId가undefined로 할당되고 있었다.
• 그 결과, ReactGA.initialize 시 [react-ga] gaTrackingID is required in initialize() 에러가 발생한다.

// .env
GOOGLE_ANALYTICS_TRACKING_ID=yourId

// .ts
const gaTrackingId = process.env.GOOGLE_ANALYTICS_TRACKING_ID;
console.log(gaTrackingId); // undefined
ReactGA.initialize(gaTrackingId); // 에러 발생

원인

• create-react-app으로 생성된 React 프로젝트에서 .env에 있는 환경변수를 사용하려면 REACT_APP을 붙여야 인식이 된다.
• 환경변수의 이름을GOOGLE_ANALYTICS_TRACKING_ID로 명시했기 때문에 문제가 발생했다.

해결

// .env
REACT_APP_GA_TRACKING_ID=yourId

// .ts
const gaTrackingId = process.env.REACT_APP_GA_TRACKING_ID;
console.log(gaTrackingId); // yourId
ReactGA.initialize(gaTrackingId);

• REACT_APP_envName으로 변경하여 해결
• .env는 서버를 다시 켜야 적용된다.

참고

• https://create-react-app.dev/docs/adding-custom-environment-variables/#adding-development-environment-variables-in-env
• https://github.com/facebook/create-react-app/issues/865