[Trouble Shooting] SyntaxError: Cannot use import statement outside a module

⚠️ 이슈 내용

UI 라이브러리를 만들어보고자 Rollup.js기반으로 만드는 과정에서 rollup.config.js 를 적용했을 때 많은 삽질이 있었습니다.  rollup을 실행시키고 지속적으로 감시하고자 rollup.config.js 파일을 생성하고 내용을 작성한뒤 다음의 명령어를 터미널에서 입력했습니다.

⚒️삽질 1

npm run rollup -cw

-c : Rollup 설정 파일을 사용하는 의미의 명렁어
-w : 파일을 감시모드로 적용하는 의미의 명령어

 

 

터미널에 명령어를 실행하고 rollup을 실행 시켜보니 다음의 에러가 발생하였습니다. 

 

처음에는  이것을 보며 import에 관한 문제? 아주 당연하게 import/export에 관한 문제겠거니 판단을 하였습니다. 왜냐하면, import 를 ES module에서 사용하지 않기 때문에 설정을 하지 않으면 종종 발생하는 에러였기 때문입니다.

 

따라서, node.js에서 import/export 를 사용하고자 한다면, package.json에 다음과 같이 type의 module을 추가하고 나니

{
    "type":"module"
}

 

에러가 발생하지 않고 실행이 잘되었습니다. 

 

오 이제 구현한 결과물을 확인하고자 설치를 받고 실행을 하니  또다시 다음의 에러가 발생했습니다.

⚒️삽질 2

뭔가 이상했다.. type을 module로 설정하고 했더니 require에러 이건 또 뭐지? 저것은 node.js 내보내기를 사용하려고 module을 사용하다보니 또 읽히지 못하는 것인가...? 멘붕이 왔다..

 require : Node.js에서 예전부터 사용되고 있는 CommonJS의 키워드이고
import : ES6(ES2015)에서 새롭게 도입되어 현재 자바스크립트 생태계에서 표준이 되어가고 있는 키워드 

 

📌 이슈 원인

Rollup 을 최신 버전인 3.XX 버전에서 발생한 버그였습니다. 3버전대인 최신의 버전으로 rollup을 사용했을 경우 이러한 문제들로 이미 많은 사람들이 애를 먹었었고 해결 방법에 대한 토의들이 많았습니다. 이곳을 통해서 알 수 있었습니다. 

Cannot use import statement outside a module rollup.config.js:1 · Issue #4446 · rollup/rollup

 

✅ 해결 방법

최신 버전의 Rollup에서는 ES 모듈 형식을 사용하는 파일에 대해 .mjs 확장자를 권장하고 있습니다. 따라서 rollup.config.js 파일을 rollup.config.mjs로 변경하면서 문제를 해결할 수 있게 됐다.. 

 

공식문서에도 버젓하게 .mjs 확장자를 사용하도록 알려주고 있었다..

 

Command Line Interface | Rollup

https://rollupjs.org/command-line-interface/

 

이로써 허무하게 삽질은 끝이 나버렸다..