반응형
1. | 에러 발생 과정
.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 확장자를 이용해야 한다.
2. | .mjs가 뭔데?
script 태그에 type="module" 어트리뷰트를 사용하게 되면 로드된 자바스크립트 파일은 모듈로서 동작하게 된다.
ES6 모듈의 파일 확장자는 모듈임을 명확히 하기 위해 .mjs를 사용하도록 권장한다.
<html />
<script type="module" src="lib.mjs"></script>
<script type="module" src="app.mjs"></script>
단, 구형 브라우저는 ES6 모듈을 지원하지 않고, 브라우저의 ES6 모듈 기능을 사용하더라도 트랜스파일링이나 번들링이 필요하기 때문에 브라우저가 지원하는 ES6 모듈 기능보다는 Webpack 등의 모듈 번들러를 주로 사용하기 때문에 별도로 설정할 일이 없다.
3. | 에러 해결 방법 1. package.json
<javascript />
// package.json
...
"type": "module"
...
package.json에 "type": "module"을 추가하기
4. | 에러 해결 방법 2. .mjs 확장자
export할 js 파일의 확장자를 .js ➡️ .mjs로 변경
5. | Refernece
Module | PoiemaWeb
모듈이란 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말한다. 모듈은 세부 사항을 캡슐화하고 공개가 필요한 API만을 외부에 노출한다. ES6 모듈은 단 두 개의 키워드 e
poiemaweb.com
반응형
'Face-to-Error' 카테고리의 다른 글
| [Next-Auth] 새로고침 시 session을 사용한 부분에 깜빡임 현상 해결하기 (0) | 2025.01.21 |
|---|---|
| URL에 한글이 포함되면 왜 깨지는 걸까? (2) | 2025.01.17 |
| [React] Netlify 배포 시 API Key 설정하기 (0) | 2022.10.14 |
| [React] Cannot create a project named "xxx" because of npm naming restrictions: (0) | 2022.08.23 |
| [React] style 적용 시 발생한 에러: The `style` prop expects a mapping from style properties to values, not a string. (0) | 2022.07.22 |
