해당 글은 발생했던 에러를 해결했던 내용을 정리하기 위한 글 입니다.
비사이드 에서 사이드 프로젝트로 지도 관련 서비스를 개발했는데, 로컬에서 문제없이 작업되었던 부분이 빌드 후 배포시에 아래와 같이 에러가 발생했습니다.
Application error: a client-side exception has occurred (see the browser console for more information).
초기 개발 당시이기 때문에 npm run dev 명령어를 통해 주로 개발 및 확인을 진행 했었는데,
배포를 진행할 때는 빌드 후 npm run start 하는 경우 위와 같은 에러가 발생했습니다.
문제 발생 원인 및 해결
Kakao map을 활용하기 위해 _document.tsx에 아래와 같이 설정을 했었습니다.
script 중 async 설정에서 문제가 발생했었습니다.
export default class MyDocument extends Document {
render() {
return (
<Html lang="ko">
<Head>
<link rel="icon" href="/favicon.svg" />
<script
type="text/javascript"
src={`//dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.NEXT_PUBLIC_KAKAO_JAVASCRIPT_KEY}&libraries=services&autoload=false`}
async
></script>
<script type="text/javascript" src="https://developers.kakao.com/sdk/js/kakao.min.js"></script>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}script에서 async 설정 같은 경우 HTML 성능을 위해 병렬적으로 스크립트를 다운받아 옵니다.
해당 서비스에서 kakao map 같은 경우 처음 사용자에게 무조건 적으로 보여야 하기 때문에 async를 제거하여 해당 에러가 발생하지 않게 처리하였습니다.
참고한 내용
Typescript를 통해 풀스택 개발을 진행하고 있습니다.