error - Failed to load env from /… /.env

Next.js 환경 변수 값에 포함된 달러 기호를 이스케이프하여 로드 오류를 해결한 기록.

Next.js, React, JavaScript, TypeScript

error — Failed to load env from /Users/…/.env TypeError: Cannot read properties of undefined (reading ‘split’)

Next.js를 이용한 프로젝트 중, 터미널에서 이런 에러를 마주쳤다. 말인즉슨, 환경 변수 파일에 문제가 생겨 로드할 수 없다는 이야기같은데, 환경 변수의 접두사로 ‘NEXT_PUBLIC_’을 붙여보기도 하고, 라이브러리 패키지들을 다시 설치해보기도 하고, 여러 방법을 동원했으나 해결할 수 없었는데, Github issue 탭과 공식 문서에 해당 에러에 관해서 기술되어 있었다.

For Example.
// .env
KEY="f3a8f$12" // wrong case
KEY="f3a8f\$12" // correct case

Next.js는 자동으로 환경 변수 파일 내부의 변수를 ‘$’ 문자를 통해 다른 변수를 참조할 수 있기 때문에, 환경 변수에 ‘$’ 문자를 사용하는 경우, 이스케이프 문자와 같이 써주어야 한다는 것이다.

특수문자가 섞인 랜덤한 패스워드를 생성하다 이 부분을 인지하지 못하고 그대로 사용했더니 발생한 문제였다.

Failed to load env - Cannot read properties of undefined (reading 'split') · Discussion #35818 ·…

Basic Features: Environment Variables | Next.js


원문: Medium