✍️ react-twitter-clone프로젝트 build를 하면서 발생한 에러이다. 프로젝트 막바지 인데 build후 발생하는 에러가 적잖이 많다. 😢.
상황
npm run build 후, 다음과 같은 에러가 떴다. configureStore 에서 window가 정의 되지 않았다는 내용이다.
store > configureStore.js 코드
Redux Extention devtools를 붙이는 과정에서 쓰인 window 변수를 인식을 못하는 듯 하다.
원인
window는 클라이언트 측에서만 정의된 전역변수 이다.
next.js 는 서버에서 렌더링 된 다음에 클라이언트로 전송 되는 구조이다.
이러한 next.js 의 특성 상 서버 측에서 먼저 위의 코드를 실행하려니 window 전역변수를 읽지 못하는 것이다.
해결
해결 방법으로 렌더링 된 후에 클라이언트 전역변수를 사용 하라고 알려져 있다.
이 같은 원리로 useEffect를 사용하여 코드를 감싸라는 해결책들이 있었는데 위와 같은 store를 생성하는 도중에 나타난 에러 시에는 useEffect를 사용 할 수 없었다.
그래서 패키지의 도움을 받았다.
redux-devtools-extension을 이용하여 다음과 같이 코드를 변경 하였다.
composeWidthDevTools로 감싸주니 window 전역변수에 대한 에러가 사라지고 build 에 성공 했다.
참고 문헌
한 걸음 한 걸음 계속 걷는 자가 일류다