toast ui calender 사용시 에러 Cannot read properties of undefined (reading 'createRangePicker') 처리방법

일정관리하는 프로그램을 개발중인데, NHN에서 고맙게 제공하는 코드가 있어서 며칠째 연구중이었는데,

한 에러때문에 참 많은 시간을 고민하고 찾고 허비한 시간이 많았습니다.

혹시 비슷한 고민하는 분들이 있을지 몰라 이렇게 올려봅니다.

에러 내용은 

toastui-calendar.min.js:9 Uncaught TypeError: Cannot read properties of undefined (reading 'createRangePicker')
    at Object.__ (toastui-calendar.min.js:9:129195)
    at ce (toastui-calendar.min.js:9:39093)
    at Array.forEach (<anonymous>)
    at t.__r (toastui-calendar.min.js:9:38178)
    at t.__r (toastui-calendar.min.js:9:105320)
    at M (toastui-calendar.min.js:9:32795)
    at b (toastui-calendar.min.js:9:29284)
    at T (toastui-calendar.min.js:9:34510)
    at M (toastui-calendar.min.js:9:33254)
    at b (toastui-calendar.min.js:9:29284)
toastui-calendar.min.js:9 Uncaught TypeError: Cannot read properties of undefined (reading 'createRangePicker')
    at Object.__ (toastui-calendar.min.js:9:129195)
    at ce (toastui-calendar.min.js:9:39093)
    at Array.forEach (<anonymous>)
    at ie (toastui-calendar.min.js:9:37928)

 

gut hub의 글들도 찾아보고 많은 것을 검색해서 봤지만, 바로 해결되지는 않았습니다.

실제 화면은 이렇게 멈춰버리겠죠.

 

에러가 떴으니 옴짝 달싹도 안하는 상황...

 

찾은 해결법은 너무 간단했습니다.

스크립트 순서의 문제였네요.

<script src="https://uicdn.toast.com/calendar/latest/toastui-calendar.min.js"></script>
<script src="https://uicdn.toast.com/tui-grid/latest/tui-grid.js"></script>
<script src="https://uicdn.toast.com/tui.pagination/latest/tui-pagination.js"></script>
<script src="https://uicdn.toast.com/tui.time-picker/latest/tui-time-picker.js"></script>
<script src="https://uicdn.toast.com/tui.date-picker/latest/tui-date-picker.js"></script>

위의 순서에서 time-picker와 date-picker가 calder.min.js보다 앞서 선언되어야 정상작동함을 알게되었습니다.

보통 이런 순서에 대한 설명은 없어서 정말 한참 에러가 대한 대응을 찾는라 고생했네요.

이렇게 순서를 정리해서 하니 되네요~~~ 휴~~~

<!-- 반드시 순서 중요함 time-picker date-picker가 toastui-calendar.min.js -->
<script src="https://uicdn.toast.com/tui.time-picker/latest/tui-time-picker.js"></script>
<script src="https://uicdn.toast.com/tui.date-picker/latest/tui-date-picker.js"></script>
<script src="https://uicdn.toast.com/calendar/latest/toastui-calendar.min.js"></script>
<script src="https://uicdn.toast.com/tui-grid/latest/tui-grid.js"></script>
<script src="https://uicdn.toast.com/tui.pagination/latest/tui-pagination.js"></script>

<link rel="stylesheet" href="https://uicdn.toast.com/tui.time-picker/latest/tui-time-picker.css" />
<link rel="stylesheet" href="https://uicdn.toast.com/tui.date-picker/latest/tui-date-picker.css" />
<link rel="stylesheet" href="https://uicdn.toast.com/tui.pagination/latest/tui-pagination.css" />
<link rel="stylesheet" href="https://uicdn.toast.com/calendar/latest/toastui-calendar.min.css" />
<link rel="stylesheet" href="https://uicdn.toast.com/tui-grid/latest/tui-grid.css"/>

 

실제 동작하니 시간/날짜 설정이 되고 에러가 사라졌습니다. 

이제 본격적으로 calendar 활용하는 프로그램을 작성할 수 있게 되서 정말 기분이 좋아졌네요.

date picker와 time picker가 나오는 것을 확인 하는 순간 정말 좋았습니다.

사실 며칠동안 왜 이렇게 안되는거지?

혹시 아파치서버를 사용해서 node js가 아니어서 환경이 안맞는 건지.. 이런 의심을 하면서...

정말 다양하게 찾아본 것 같은데...

해결책이 너무 단순한거라 ... 다음에도 이런 경우를 대비해야겠다는 생각마져 들었습니다.

 

저처럼 혹시 찾아 돌아다니는 분들이 있을까 해서 기록으로 남겨봅니다.

즐거운 코딩되세요~