Kakao.init: Already initialized 에러가 납니다 ㅠ_ㅠ (nextjs+ ts)

JavaScript
1

footer에 톡상담을 넣으려하는데,
에러가 나네요, 초기화 함수를 한번만 호출하라고 하는데
혹시 어떻게 넣어야할까요…? ㅠㅠ

function Kakao() {
useEffect(() => {
  const script = document.createElement('script');
  const Kakao = window.Kakao;

  script.async = true;

  try {
    if (Kakao) {
      Kakao.init(process.env.NEXT_PUBLIC_KAKAO)
    }

  } catch (e) {
    console.error(e)
  }
  window.Kakao.Channel.createChatButton({
    container: '#kakao-talk-channel-chat-button',
    channelPublicId: 'id',
    title: 'consult',
    size: 'small',
    color: 'yellow',
    shape: 'pc',
    supportMultipleDensities: true,
  });

  document.body.appendChild(script);
  document.body.removeChild(script);
}, []);

}

Kakao();

image

2

Kakao.init(process.env.NEXT_PUBLIC_KAKAO)

안녕하세요.

에러 메시지와 같이 위 init는 한번만 호출되도록 별도 로직으로 분리 시켜주세요.

1개의 좋아요
3

image

이제는 이런 에러가 뜨는데… 아래와 같이 변경하라는 말씀이신가요?

useEffect(() => {
const script = document.createElement('script');
const Kakao = window.Kakao;

Kakao.init(process.env.NEXT_PUBLIC_KAKAO)

window.Kakao.Channel.createChatButton({
  container: '#kakao-talk-channel-chat-button',
  channelPublicId: '_xlMxiwb',
  title: 'consult',
  size: 'small',
  color: 'yellow',
  shape: 'pc',
  supportMultipleDensities: true,
});

document.body.appendChild(script);
document.body.removeChild(script);

}, []);

현재 script는 _document.tsx에 아래와 같이 삽입되어있습니다. 쓰이는 곳은 footer.tsx구요

<script defer src="https://developers.kakao.com/sdk/js/kakao.min.js"></script>
4

Kakao Developers

JS SDK데모에서 container 값을 임의로 변경하시면 동일한 에러 메시지를 확인하실 수 있습니다.

id가 kakao-talk-channel-chat-button 인 객체를 찾지 못해서 발생하는 에러입니다.

확인 부탁드려요.

1개의 좋아요
5

아하 그렇군요 정말 감사합니다 제가 엄한곳에서 삽질하고있었네요!! ㅜㅜ
제가 tailwind css를 쓰고있는데 혹시나 커스텀을 하고싶을때 참고할만한 문서가 있을까요??