next.js, useKakaoLoader, 오류 메세지

pmingkr commented 8 months ago

환경 react-kakao-maps-sdk@1.1.21 next@3.4.19

스크립트

const [loading, error] = useKakaoLoader({
appkey: "키", // 발급 받은 APPKEY
libraries: ["services", "clusterer", "drawing"],
});

return (
<>
  <Map
    center={{ lat: 33.375593296624764, lng: 126.54190847610725 }}
    style={{ width: "100%", height: height + "px" }}
    level={10}
  ></Map>
</>
);

재현 개발 환경에서 실행, 새로고침을 여러번 시도 후 오류가 발생

- wait compiling /api/dashboard/customer/route (client and server)...
log.js:67
- event compiled client and server successfully in 688 ms (1392 modules)
log.js:82
- error node_modules\react-kakao-maps-sdk\esm\util\kakaoMapApiLoader.js (175:0) @ Loader.deleteScript
log.js:70
- error ReferenceError: document is not defined
    at JejuMap (./app/hepi/dashboard/map/jejuMap.tsx:73:98)
log.js:70
null
setup-dev.js:993
- error node_modules\react-kakao-maps-sdk\esm\util\kakaoMapApiLoader.js (175:0) @ Loader.deleteScript
log.js:70
- error ReferenceError: document is not defined
    at JejuMap (./app/hepi/dashboard/map/jejuMap.tsx:73:98)
log.js:70
null
setup-dev.js:993
- error node_modules\react-kakao-maps-sdk\esm\util\kakaoMapApiLoader.js (175:0) @ Loader.deleteScript
log.js:70
- error ReferenceError: document is not defined
    at JejuMap (./app/hepi/dashboard/map/jejuMap.tsx:73:98)
log.js:70
null

시도한 해결 방안

next.js는 서버측에서 프리렌더링을 시도하기 때문에 서버 상태에서 document를 액세스하는 부분이 문제라고 생각해서. 로 수정해보았지만, 이 경우 ESLint에서 오류를 내요. (실행시에는 문제는 없음)

React Hook "useKakaoLoader" is called conditionally. React Hooks must be called in the exact same order in every component render.eslint[react-hooks/rules-of-hooks](https://reactjs.org/docs/hooks-rules.html)

useKakaoLoader 대신 Script로 넣어서 실행하려고 했지만 /app/layout.tsx를 사용하는 환경에서 strategy="beforeInteractive"의 스크립트를 넣으면 ESLint에서 경고를 발생, 다른 stratergy에서는 작동하지 않음.

`next/script`'s `beforeInteractive` strategy should not be used outside of `pages/_document.js`. See: https://nextjs.org/docs/messages/no-before-interactive-script-outside-documenteslint[@next/next/no-before-interactive-script-outside-document](https://nextjs.org/docs/messages/no-before-interactive-script-outside-document)

JaeSeoKim commented 8 months ago

@pmingkr nextjs13의 App dir의 경우 일반적인 SSR이 아닌 React Server Component로 동작하기 때문에 use client Directive가 필요 합니다. https://nextjs.org/docs/messages/react-client-hook-in-server-component

그리고 React의 Hook은 Conditional 하게 동작해서는 안됩니다. https://ko.legacy.reactjs.org/docs/hooks-rules.html

pmingkr commented 8 months ago

@pmingkr nextjs13의 App dir의 경우 일반적인 SSR이 아닌 React Server Component로 동작하기 때문에 use client Directive가 필요 합니다. https://nextjs.org/docs/messages/react-client-hook-in-server-component

그리고 React의 Hook은 Conditional 하게 동작해서는 안됩니다. https://ko.legacy.reactjs.org/docs/hooks-rules.html

이미 "use client";는 써놓았어요. 동작 자체에는 문제가 없으며, 간헐적으로 오류 메세지가 나와요.

https://github.com/vercel/next.js/issues/44014#issuecomment-1448222112 'use client' marks a component as "can run in the browser" and not "shall only run in the browser", it's basically the same as components in pages today, there's no semantic difference. The only new part is server components.

JaeSeoKim commented 8 months ago

@pmingkr SSR 환경에서 동작하는 것을 고려하여, useEffect 내부에서 window, document 사용하는 작업은 격리해둔 상황입니다. 코드상에서 의심이 되는 부분이 한가지 있는데, 바로, Loader 객체 생성자에서 static으로 선언된 instance가 존재하면 reset 하는 로직에서 document 키워드를 사용하기 때문에 발생화는 문제로 보입니다. https://github.com/JaeSeoKim/react-kakao-maps-sdk/blob/main/packages/react-kakao-maps-sdk/src/util/kakaoMapApiLoader.ts#L108 https://github.com/JaeSeoKim/react-kakao-maps-sdk/blob/main/packages/react-kakao-maps-sdk/src/hooks/useKakaoLoader.tsx#L18-L21

해당 부분을 빠르게 수정하여 npm에 beta 키워드로 배포를 하겠습니다. 오류가 발생하는지 확인해주실 수 있으실까요? 현재 현역 군 복무중에 있어, 테스트가 힘들다는 점 양해드립니다. 또한 해당 현상을 제현한 CodeSandBox와 같은 Web IDE를 통해 공유 해주시면 문제 해결이 더욱더 수월합니다.,!!

JaeSeoKim commented 8 months ago

@pmingkr https://www.npmjs.com/package/react-kakao-maps-sdk/v/1.1.22-beta 배포하였습니다.

pmingkr commented 8 months ago

@pmingkr SSR 환경에서 동작하는 것을 고려하여, useEffect 내부에서 window, document 사용하는 작업은 격리해둔 상황입니다. 코드상에서 의심이 되는 부분이 한가지 있는데, 바로, Loader 객체 생성자에서 static으로 선언된 instance가 존재하면 reset 하는 로직에서 document 키워드를 사용하기 때문에 발생화는 문제로 보입니다. https://github.com/JaeSeoKim/react-kakao-maps-sdk/blob/main/packages/react-kakao-maps-sdk/src/util/kakaoMapApiLoader.ts#L108 https://github.com/JaeSeoKim/react-kakao-maps-sdk/blob/main/packages/react-kakao-maps-sdk/src/hooks/useKakaoLoader.tsx#L18-L21

해당 부분을 빠르게 수정하여 npm에 beta 키워드로 배포를 하겠습니다. 오류가 발생하는지 확인해주실 수 있으실까요? 현재 현역 군 복무중에 있어, 테스트가 힘들다는 점 양해드립니다. 또한 해당 현상을 제현한 CodeSandBox와 같은 Web IDE를 통해 공유 해주시면 문제 해결이 더욱더 수월합니다.,!!

수정해주셔서 감사합니다. 오류 없이 정상적으로 작동되요. 재현 예제: https://codesandbox.io/p/sandbox/determined-albattani-rdglpv?file=%2Fapp%2Fpage.tsx%3A8%2C19

카카오 프로젝트 일부라고 생각했는데, 개인 프로젝트였군요. 모듈 제공 감사합니다. 잘 쓰고있어요.

JaeSeoKim commented 8 months ago

@pmingkr v1.1.22 배포완료하였습니다.! 이슈 리포트 감사합니다.!!!

https://www.npmjs.com/package/react-kakao-maps-sdk/v/1.1.22

JaeSeoKim / react-kakao-maps-sdk

next.js, useKakaoLoader, 오류 메세지 #62