[JavaScript] .js vs .mjs

 

| 에러 발생 과정

.js 파일에서 export 키워드를 사용하니

SyntaxError: Unexpected token 'export'  에러가 발생했다.

ESLint를 사용하면 친절하게 해결 방법에 대해서 알려준다.

Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.

ES 모듈인 export를 사용하려면 package.json에 type: module을 사용하거나, .mjs 확장자를 이용해야 한다.

 

 

| .mjs가 뭔데?

script 태그에 type="module" 어트리뷰트를 사용하게 되면 로드된 자바스크립트 파일은 모듈로서 동작하게 된다.

ES6 모듈의 파일 확장자는 모듈임을 명확히 하기 위해 .mjs를 사용하도록 권장한다.

<script type="module" src="lib.mjs"></script>
<script type="module" src="app.mjs"></script>

단, 구형 브라우저는 ES6 모듈을 지원하지 않고, 브라우저의 ES6 모듈 기능을 사용하더라도 트랜스파일링이나 번들링이 필요하기 때문에 브라우저가 지원하는 ES6 모듈 기능보다는 Webpack 등의 모듈 번들러를  주로 사용하기 때문에 별도로 설정할 일이 없다.

 

| 에러 해결 방법 1. package.json

// package.json
...
"type": "module"
...

package.json에 "type": "module"을 추가하기

 

| 에러 해결 방법 2. .mjs 확장자

export할 js 파일의 확장자를 .js ➡️ .mjs로 변경

 

| Refernece

Module | PoiemaWeb