[Google Calendar Advanced] create task 구현

오랜만의 자바스크립트라서 몸 풀기 느낌으로 목표를 정했다. 넉넉잡아 3시간을 잡았고 시작했다. task 추가 버튼을 눌렀을 때 새로운 task가 뜨도록 만드는 게 목표였다. 최대한 함수를 분리하고 가독성 좋은 코드를 만드는 것에 노력했다.

에러 상황

Uncaught SyntaxError: Cannot use import statement outside a module

원인

함수를 분리할 때 require 대신 import를 사용해서 나는 에러였다. 아무런 설정을 하지 않았을 때 기본적으로 사용되는 모듈은 require을 사용하는 commonjs 방식이다.

해결

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

html 내의 script태그의 속성으로 type = “module”으로 줘서 해결할 수 있었다. 이 때 주의해야할 점은 type = “module”로 불러온 js의 내부에서 다른 js파일을 import할 때 from 뒤의 경로를 확장자까지 모두 적어줘야 한다. 그렇지 않으면 not found 에러가 나온다.

// import createTaskElement from "./createTaskElement"; // <- not found 에러가 나온다
import createTaskElement from "./createTaskElement.js";

또 다른 방법으로는 package.json에서 “type”필드에 “module”을 넣어주면 된다고 한다. 아직 서버를 띄우지 않고 live server extention으로 개발 중이라 확인은 하지 못했다.