계발하는 개발자

[빌드 에러] 빌드시 kakao is not defined 에러뜨는 문제 해결 본문

❗️Error

[빌드 에러] 빌드시 kakao is not defined 에러뜨는 문제 해결

dev_genie 2023. 11. 5. 03:51

참고

https://cotak.tistory.com/109

 

에러

프로젝트 빌드 파일에서 아래같은 kakao is not defined 에러가 났다.

이전에 kakao map api 연동하려고 했을 때에도 동일한 에러가 났었는데, 이번엔 빌드하려고 했을 때 이 에러가 또 발생한 거다.

 

원인

이유는 "kakao" 변수가 웹페이지의 스크립트에서 정의되는 글로벌 변수이자, 외부 스크립트를 통해 제공됨에도 해당 스크립트를 페이지에 로드하지 않고(index.html) 사용할 특정 컴포넌트 파일에서만 참조하게끔 해서 였다... !

(그러고보면 애시당초 kakao map 가이드문서에도 index.html 파일에 kakao SDK 추가하라고 하긴 했던 것 같다.)

 

암튼 컴포넌트 mounted hook에서 kakao SDK를 로드했어도 컴포넌트 초기화 과정에서 의존성

문제로 스크립트를 못 찾아서 에러를 뿝는 듯하다ㅠ

 

해결

index.html <head> 태그 안에 다음의 SDK 삽입해주고 (반드시 상단에 로드해야한다!)

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey={APP_KEY}&libraries=services"></script>

 

index.html에 삽입한 지도 API를 호출하기 위해 컴포넌트 파일 상단에 /*global kakao*/ 주석을 추가해줬다.

나는 mounted hook에서 API를 호출하고 있으므로 아래 같이 해줬다.

mounted() {
/* global kakao */

 

 

또는 kakao 앞에 window를 붙여주는 방법도 있다.

mapOption = {
    center: new window.kakao.maps.LatLng(lat, lng), // 지도의 중심좌표
    level: 3, // 지도의 확대 레벨
    disableDoubleClickZoom: true, // 두번 클릭시 확대 기능 막기
};

// 지도 생성
const map = new window.kakao.maps.Map(mapContainer, mapOption); 
//인포윈도우 표시 위치
const iwPosition = new window.kakao.maps.LatLng(lat, lng);

이런식으로.

 

이렇게 해주면 에러가 깔끔하게 해결된다.

LIST

'❗️Error' 카테고리의 다른 글

[에러 해결] Extracting 상태에 계속 멈춰있는 현상 해결  (4) 2023.11.08
[Github 배포 에러] Github 배포시 이미지 경로 에러 해결  (0) 2023.11.06
[Next.js 에러] The resource [URL] was preloaded using link preload but not used within a few seconds from the window's load event 해결  (1) 2023.10.26
[Next.js 에러] Skipping auto-scroll behavior due to `position: sticky` or `position: fixed` on element 해결  (3) 2023.10.25
[FIlezila] 파일질라 SFTP 접속후 var 폴더 안보임 해결  (2) 2023.10.24
profile

dev_genie

@dev_genie

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!