[jQuery] 자주 만나는 에러 Uncaught TypeError: Cannot read properties of undefined (reading 'mode') 에러 잡기

실전코딩에서 너무 자주 만나서 많이 찾아보았다.

도대체 저 에러는 뭔가?

실제 F12 개발자 모드로 들어가서 콘솔창을 보면

Uncaught TypeError: Cannot read properties of undefined 실제 메시지

 

 

많이 당황하게 된다. 제이쿼리 자체의 버그인가? 라는 생각을 많이 했는데,

불러온 코드를 살펴봤다.

위의 코드내용을 보면 jquery.validate.min의 어쩌고 저쩌고 하지만,

결과적으로 선언을 중복해서 생긴 오류로 판단된다.

실제 코드인데, 스크립트 불러오는 코드 중 Main jQuery와 상부에 선언된 제이쿼리가 겹치는 것을 알 수 있다.

이것저것 코드를 응용해서 쓰다보니, 너무 장황하게 사용해서 그런 면이 있는 것 같다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://uicdn.toast.com/tui.pagination/latest/tui-pagination.css" />
<script src="https://uicdn.toast.com/tui.pagination/latest/tui-pagination.js"></script>
<link rel="stylesheet" href="https://uicdn.toast.com/tui-grid/latest/tui-grid.css"/>
<script src="https://uicdn.toast.com/tui-grid/latest/tui-grid.js"></script>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.1/font/bootstrap-icons.css">
<!-- 화면에 UI창 알람창 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>


<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

<!-- Main jQuery -->
<script src="plugins/jquery/jquery.js"></script>
<!-- Bootstrap 4.3.1 -->
<script src="plugins/bootstrap/js/bootstrap.min.js"></script>
<!-- Slick Slider -->
<script src="plugins/slick-carousel/slick/slick.min.js"></script>
<!--  Magnific Popup-->
<script src="plugins/magnific-popup/dist/jquery.magnific-popup.min.js"></script>
<!-- Form Validator -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.form/3.32/jquery.form.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.11.1/jquery.validate.min.js"></script>
<!-- Google Map -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu5nZKbeK-WHQ70oqOWo-_4VmwOwKP9YQ"></script>
<script src="plugins/google-map/gmap.js"></script>

<script src="js/script.js"></script>

 

아래 코드를 제거하고 실행하니....
<!-- Main jQuery -->
<script src="plugins/jquery/jquery.js"></script>

 

에러 없이 잘되는 것을 볼 수 있었다.

일종의 중복해서 로딩하면 나오는 에러메시지로 봐도 무방할 것 같다.

휴~ 다행이다~