React - next js process is not defined error

Next js에서 env 파일에 환경 변수를 설정하고 나서 process is not defined error가 발생할 수 있다. 구글에서 next js process is not defined를 찾아보면 react scripts 버전을 업데이트를 하고, react-error-overlay@6.0.9를 삭제하는 방법이 있었다. 아니면 scripts에서 "preinstall":"react-error-overlay@6.0.9"를 설치하라는 명령도 있었지만 해결할 수 없었다.

 

# process is not defined error

## process is not defined 해결

env 파일에 토큰을 설정했을 땐, env 변수를 잘 사용을 했는데, env 변수를 추가를 했더니 불러 오지 못했다. 그 이유는 next js 버전이 12 이상이 되면서 구조할당 문제가 있는것처럼 보였다.

 

이렇게 변수를 사용했을 땐, 위와 같은 error가 발생 했다.

const { NEXT_PUBLIC_API_BASE_URL, NEXT_PUBLIC_API_VERSION } = process.env;

 

하지만, 한개 변수만 호출 했을 땐, env 값을 잘 불러왔다.

const { NEXT_PUBLIC_API_BASE_URL } = process.env;

 

그래서 따로따로 한번 해볼까? 라는 생각에 시도 했더니, 변수를 아래 코드와 같이 실행 했을 땐, 두 변수 모두 잘 가져올 수 있었다.

const { NEXT_PUBLIC_API_BASE_URL } = process.env;
const { NEXT_PUBLIC_API_VERSION } = process.env;