[rollup.js] rollup -c 실행 시, Cannot use import statement outside a module

목차

· rollup -c 실행 시, 오류가 발생하다.

· 해결 방법

· 왜, 이 오류가 발생했을까?

---

rollup -c 실행 시, 오류가 발생하다.

rollup -c 실행 시에 Cannot use import statement outside a module 오류가 발생했다. 그 이유는 rollup.config.js에 import 방식을 사용하면서 발생을 했는데, package.json에 type을 module로 지정을 해주지 않으면 commonJS로 인식이 되어진다. 이때, rollup.config.js에서 ESM 방식의 import 방식을 사용해서 발생을 하고 있었다. 해결 방법으로는 간단하게 type을 module로 명시를 해줘 ESM 방식으로 호환이 되게 하는 것인데, 이렇게 해결을 하게 되면 라이브러리 패키징 시에 type을 명시하여 패키징을 진행하고, pnpm으로 프로젝트를 실행할 때는 타 파일들과의 충돌을 피하기 위해 또 type을 commonJS로 변경해줘야하는 번거로움이 생긴다. 물론, 프로젝트도 정상적으로 돌아가지 않는다. 분명 type을 명시하지 않고 로컬 환경으로 프로젝트를 실행했을 때는 잘 동작이 되어지는데, 이 환경을 그대로 가져가고 싶었다. 그렇게 되면 type을 명시하지 않고, 그대로 가져갈 수 있는 방법을 생각해내야했다.

해결 방법

rollup.config.js 를 rollup.config.mjs로 변경을 한다.

왜, 이 오류가 발생했을까?

config.js는 common.js 방식으로 import 방식을 지원하지 않는다. 그래서 rollup -c 명령어를 실행하게 되면, Cannot use import statement outside a module 오류가 발생한다. 코드 안에서 import를 통해 관련 패키지들을 가져오고 있기 때문에, 확장자를 mjs를 변경해주거나, package.json의 type을 module로 변경해주는 방법으로 해결을 하는 방법이 있다. 내 프로젝트에서는 rollup -c와 tsc를 패키지 배포 전 prepare로 사전 단계를 진행해주기 때문에 rollup.config.mjs 방식을 채택하여 진행을 했다.

---

레퍼런스

rollup 정리

GitHub - rollup/rollup-watch: Fast incremental rebuilds with Rollup CLI