[JS] Uncaught SyntaxError: Cannot use import statement outside a module 에러 해결

바닐라 자바스크립트로 투두리스트를 만들어보고 있다.

 

GitHub - jisunipark/toodoo

 

자바스크립트 코드는 모두 index.js 파일 안에서 관리하고 있었는데 todo 아이템이나 todo 입력창 요소를 새로 생성해서 DOM에 추가하는 부분의 함수가 너무 길어져서 한 파일에서 관리하기엔 너무 복잡해질 것 같다는 생각이 들었다. 그래서 js 파일을 모듈화해서 관리하기로 했다.

 

createElement.js라는 파일을 생성해서 해당하는 함수를 export 키워드를 붙여 옮겨두었고 index.js 파일에서는 옮긴 함수를 import 문을 통해 불러오는 방식으로 리팩터링을 했다.

 

그런데 나타나는 에러,

Uncaught SyntaxError: Cannot use import statement outside a module

 

 

찾아보니 위의 에러는 import 문이 제대로 사용되지 않았을 때 발생하는 에러라고 한다. 주요 원인와 각각의 해결 방법은 다음과 같다.

 

1. 스크립트가 “모듈”로 선언되지 않은 경우

import 문은 ES6 모듈 시스템에서만 사용할 수 있다. 만약 HTML 파일에 <script> 태그로 자바스크립트를 연결하면서 type="module" 속성을 추가하지 않으면 위와 같은 에러가 발생한다.

<script type="module" src="index.js"></script>

 

이런 경우에는 type="module" 속성을 추가하면 더이상 에러가 발생하지 않는다. 

 

나 역시 HTML 문서의 script 태그에 타입 속성을 설정해주지 않았기 때문에 위 속성을 추가해주었더니 에러가 사라졌다!

 

 

<모던 자바스크립트 Deep Dive> 책에서 찾아보니 type="module" 어트리뷰트를 추가하는 건 ES6 모듈의 기본 사용법이다. 그러니 이 속성을 추가하지 않았을 때 에러가 발생하는 것은 당연한 결과였다.

 

2. 브라우저가 모듈을 지원하지 않는 경우

 브라우저가 모듈을 지원하지 않는 경우에도 위 에러가 발생한다. 최신 브라우저는 기본적으로 ES6 모듈을 지원하지만, 구형 브라우저에서는 지원하지 않을 수 있다고 한다. (인터넷 익스플로러 같은..)

 

3. Node.js 환경에서 import를 사용하는 경우

Node.js에서는 기본적으로 CommonJS 모듈 시스템을 사용하는데(require과 module.exports), import ansdms ES Module에서만 사용 가능하기 때문에 import를 사용하려면 package.json 파일에 "type" : "module"을 추가하거나,

{
  "type": "module"
}

 

파일 확장자를 .mjs로 변경하면 된다.

app.mjs

 

4. 파일 경로 오류

import 문에서 경로를 잘못 설정하면 에러가 발생할 수 있다. 특히 로컬 파일을 import 할 때 경로가 ./ 또는 ../ 로 시작하지 않으면 브라우저가 이를 외부 모듈로 인식하려 하면서 오류가 발생할 수 있다고 한다.

 

 

---

 

나는 1번 경우에 해당했기 때문에 type="module" 속성을 추가하니 문제는 해결 되었다. ES6 모듈을 사용할 때에는 주의하자..

 

그런데 이어서 다른 오류가 생겼는데.. ERR_ABORTED 404 오류. 이 문제는 다음 포스트에서 다루겠다.

 

[JS] net::ERR_ABORTED 404 오류 해결

 

 

 

 

참고

Uncaught SyntaxError: Cannot use import statement outside a module 에러 해결