어쩌다 마주친 Unexpected end of json input오류. 다신 마주치지 말자.

갑자기 찾아온 'Unexpected end of json input' 빌드 오류

어제였다.

현재 NextJS app route를 사용하고 있는데, 배포된 화면에서는 이미지가 나오지 않는 것. 하지만 로컬에는 잘 나온다.
(참고: 프론트 프로젝트는 셋팅부터 내가 했음, 자랑하는게 아니라 이미지가 안나오는 걸 발견한게 이미지를 배포해본 적이 없는 새삥 프로젝트 때문임을 강조하기 위함.)

프로젝트 구조는 루트경로에 app과 public이 있다.
my-nextjs-app/
├── app/
├── public/
│ ├── images/
│ └── ...

일단 문제는 배포될 때, public이 포함되지 않았던 것.
확인했더니(배포 도메인/images/파일이름 으로 검색했을 때, 이미지가 안나오면 배포안된 것. 왜냐 로컬에서는 localhost:3000/images/파일이름 하면 이미지가 나옴) 확실히 배포될 때 해당 경로가 포함되지 않은 걸 확인했음

나의 대처 방법(Dockerfile에 경로 포함시켜서 배포되도록 추가)

COPY --from=builder /app/public ./public

문제는 지금부터였다. 적용해서 빌드하고 배포하는데

Unexpected end of json input 왜죠

1. 아직 백엔드 서버에서 api를 받아오고 있지 않음
2. 일단 각각 파일에는 json형식이 없음
3. .json 확장자 파일에 문제 없음
4. 캐시삭제 해봄
5. npm 다시 설치해봄
   
6. 그냥 해보라는 거 다 해봤음

검색도 해봤음
결국 해결하지 못하고 퇴사 아니고 퇴근함ㅋㄷ

아침에 출근했음 2시간 동안 계속 해결방안을 찾아보기 위해 노력함

(참고: 노력한 흔적들)

구글링 시작해봄
어????분명 어제까지는 없던 나와 같은 문제를 가진 사람을 찾음
1. https://stackoverflow.com/questions/79201586/react-build-error-unexpected-end-of-json-input
2. https://stackoverflow.com/questions/79196464/react-js-failed-to-compile-unexpected-end-of-json-input-error

문제: 저는 예전과 다름없이 쓰고 있는데 오늘 빌드하려니 갑자기 오류가 발생하고 있어요!
대답: 노드 버그같아. 노드 버전의 문제이니 너는 노드의 버전을 LTS로 낮춰보겠니? 라는 답변이었다.

근데 저는뇨, 20 버전을 쓰고 있었거든요? 쨌든 노드 문제일 것 이라는 부푼 희망을 안고(내 잘못 아님) 선임님께 문의를 드려쬬.

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ아무튼 선임님은 그라데이션 분노였찌만!
지금은 어떻게 되었냐하면 쨔쟈쟌!

해당 Unexpected end of json input오류는 선임님이 해결했음.
어떻게 해결했냐하면, 빌드에 쓰이는 모든 node버전을 통일하셨다고 함(node 18버전으로 통일함)

• Dockerfile
• .gitlab-ci.yml
• package.json

모든 파일에 node 버전을 18로 낮춘상태닷!
내가 마지막으로 수정한 건 버전을 낮추면서 기존에 없었던 타입 오류가 미친듯이 발생했고 모든 파일의 타입 오류를 고쳤다.

회고

1. 일단 nextjs의 문제는 아니라는 점.
2. 오류 발생한 사람들의 공통점은 react를 사용하고 있었다는 점.
3. 진짜 노드 버전을 수정하니 해결이 되었다는 점

자칫 잘못했다가

또 vue 할 뻔...