[Next.js] TypeError: kakao.maps.LatLng is not a constructor

[regisBafutwabo]

Description

I am getting this issue after following the guide for Nextjs configuration

Versions

nextjs version: 12.2.0 react version: 18.2.0

Screenshot:

Any hint on how to solve it?

[leejunyoung228]

same here

[ziponia]

+1

[minimabot]

Map 컴포넌트 내부에서 카카오 지도에 필요한 스크립트를 동적으로 가져오는 경우를 처리하지 않아 발생한 오류로 보입니다. 저 같은 경우 Map 컴포넌트를 감싸는 상위 컴포넌트를 임시로 만들었고, 해당 컴포넌트 내부에서 카카오 지도에 필요한 스크립트를 가져오는 작업이 완료되면 Map 컴포넌트를 렌더링하도록 처리하였습니다. 아래는 예시로 작성한 코드입니다.

import Script from 'next/script';
import React, {useState} from 'react';
import {Map} from 'react-kakao-maps-sdk';

let isAlreadyLoaded = false;

const MapWrapper = props => {
  const [loaded, setLoaded] = useState(isAlreadyLoaded);

  return (
    <>
      <Script
        src='https://dapi.kakao.com/v2/maps/sdk.js?appkey={APP_KEY}&autoload=false' // autoload 파라메터는 false로 지정
        onLoad={() => {
          kakao.maps.load(() => {
            isAlreadyLoaded = true;
            setLoaded(true);
          });
        }} // 동적으로 로드
      />
      {loaded && <Map {...props} />}
    </>
  );
};

[ziponia]

@hellomhc 어떤 형태인지 이해 할 듯합니다

의문이 드는점은, nextjs _document.js 에 html script 태그로 넣지 않고, nextjs Script 태그로 넣은것은,

컴포넌트가 마운트 된 후 동적으로 가져오기 위함인건가요?

만약 그렇다면,

unmount 시 해제는 어떻게 해야 하나요? nextjs 문서에 봐도, Script unload 에 대한 내용은 찾을수가 없네요 ;) 아이디어가 있나요?

[minimabot]

우선 @ziponia 님의 질문에 대한 답변을 드리자면

1. 컴포넌트가 마운트 된 후 동적으로 가져오기 위함인건가요? -> 네 맞습니다. 카카오 지도를 직접적으로 사용할 때만 스크립트를 가져오기 위함입니다.

2. unmount 시 해제는 어떻게 해야 하나요? -> script를 제거하는 방법을 말씀하시는 거라면 useEffect와 URL을 사용해서 제거할 수 있을 것 같습니다. 다만 특별한 이유가 없다면 이미 가져온 script를 제거할 필요는 없어보입니다.

그리고 위에서 제가 예시로 작성한 코드를 그대로 실행할 경우 컴포넌트가 최초로 실행된 후 다시 실행될 때 지도가 표시되지 않는 이슈가 있어서 약간 수정하였습니다.

[JaeSeoKim]

군 입영을 6월 27일경에 하여서 이슈에 대해서 의견을 못드리고 있었네요 ㅠㅠ 해당 부분에 대해서는 아래의 hook를 한번 활용해보시는 것을 추천드립니다.

https://react-kakao-maps-sdk.jaeseokim.dev/docs/api/functions/useInjectKakaoMapApi

[JaeSeoKim]

There seems to be an error with the kakao map api dynamic loading function added in the latest version. I will fix the problem soon and distribute the modified version.