카카오톡 채널 버튼 추가 문제

JavaScript
1

문의 시, 사용하시는 SDK 버전 정보와 디벨로퍼스 앱ID를 알려주세요.

import { useEffect } from "react";
import styles from "../KakaoChatButton/KakaoChatButton.module.css";

const KakaoChatButton = () => {
  useEffect(() => {
    if (window.Kakao) {
      const script = document.createElement("script");
      script.src = "https://developers.kakao.com/sdk/js/kakao.min.js";
      script.onload = () => {
        const key = process.env.REACT_APP_KAKAO_KEY;
        window.Kakao.init(key);
      };
      document.head.appendChild(script);
    }
  }, []);

  const kakaoChat = () => {
    if (window.Kakao) {
      console.log("Kakao SDK is loaded.");
      try {
        window.Kakao.Channel.chat({
          channelPublicId: "_ibrXG", // Replace with your channel's public ID.
        });
      } catch (error) {
        console.error("Error in Kakao chat:", error);
      }
    } else {
      console.error("Kakao SDK is not loaded.");
    }
  };

  return <button onClick={kakaoChat} className={styles.button}></button>;
};

export default KakaoChatButton;

위는 제 코드인데 localhost 환경에서는 버튼을 누르면 카카오톡으로 채팅알림이 잘 오는데 배포 환경에서는 다음과 같은 에러가 뜨더라구요… 어떻게 해결해야할까요?

image
image1420×360 70.4 KB

2

에러 메시지 그대로 해당 이벤트 생명주기에서 JS SDK 의 chat 객체를 못찾는다는 이야기 같은데요.
if (window.Kakao) { 를 통과한 것 을 볼때 JS SDK가 훼손되지 않았을까 싶네요.

(1) sdk 주소를 아래 주소로 바꿔보시겠어요?
기재하신 주소는 아래 주소로 리다이렉트 되며, 아래 주소가 변경된 공식 주소입니다.

https://t1.kakaocdn.net/kakao_js_sdk/v1/kakao.min.js

(2) 시스템내 SDK import하는 또 다른 코드가 있는지 확인해주세요.