Rollup Config에 JSON Import 이슈

문제의 발생

요즘 회사에서 진행하는 프로젝트로 시간이 부족하여 오픈 소스 관련된 개발이나 문서를 볼 여유가 없었다. … 그래 귀찮아서 안보고 있었다.

최근 손이 모자라 관리하던 프로젝트를 프리랜서에게 넘기는 일이 있었다. 늘 있는 일처럼 내 맥에서는 잘되는데 니 맥에서는 왜 안되냐? 가 발생했다. 당연한 수순으로 나는 너의 맥이 이상하다. 를 하려고 했지만 나의 맥이 문제였다.

간단히 설명하자면… 코드는 관리하지 않고, 의존성 버전만 올리니 문제가 발생했다. 코드가 못따라가는 상황이었다. 이미 망각의 방에 있는 코드에서 에러가 발생하니 매우 난감했다. 대충 에러 코드는 아래와 같았다.

[!] TypeError: Module "~/Desktop/Project/reacth/package.json" needs an import assertion of type "json"

너는 무엇이냐…

문제의 해결

개발하면서 얻은 짧은 영어 실력으로 보면… JSON 파일을 불러오지 못한다. 는 내용으로 이해했다. 그래서 구글링해서 얻은 결과 나는 rollup에서 JSON import를 지원하는 플러그인을 찾았다.

누구나 하는 의존성 설치하고, Git README에 있는 설명으로 코드를 적용하니… 같은 에러가 발생했다.

나는 생각했다. 내 코드에 JSON을 import하는 부분이 있던가? 망각의 방에 있던 기억들이 조금씩 방에서 나오고 있었다. 이 코드는 사내 서비스를 로그인하기 위한 구글 Auth 버튼 컴포넌트이다. 아무리 뒤져봐도 JSON을 import하는 부분이 없었다.

오직 한 부분만 JSON을 필요로 하고 있었다. rollup.config.js

여기까지 오니 뭔가 이상했다. rollup을 할때 JSON import를 지원하는 플러그인을 추가한건데, rollup을 설정하는 부분도 지원을 할까? 당연히 지원하지 않는다. 아무리 추가를 해보고, 순서와 위치 바꿔가면서 해보아도 같은 에러는 발생했다.

저 에러코드를 rollup 문서에서 찾아봤자 나오는 것은 없었다. 이제 해결책은 rollup이 아닌 JS의 기본에서 찾아야한다. v8 문서를 보니 재미있는 코드를 발견했다.

import pkg from './package.json' assert { type: 'json' }

내가 모르는 사이 JSON을 import하기 위한 방법이 있었다. 굉장히 짧고도 강렬한 문제 해결이었다.

이후 검색을 해보니 assert 라는 단어는 주장하다. 라는 뜻이었다. 에러 내용을 천천히 다시 보니 JSON 파일을 불러오지 못한다. 라는 내용이 아니었다. import할 때 type이 JSON이라는 주장을 하라는 내용이었다.

이제… 일하러 가야겠다.

참고

  1. https://github.com/rollup/rollup-plugin-json
  2. https://v8.dev/features/import-assertions