Microsoft Clarity 통합 시 Uncaught TypeError: a[c] is not a function 오류 해결 방법

Next.js 애플리케이션에 Microsoft Clarity와 같은 타사 스크립트를 통합할 때, Next.js가 스크립트를 로딩하고 실행하는 방식으로 인해 특정 충돌이 발생할 수 있습니다. 흔히 발생하는 문제 중 하나는 JavaScript 오류입니다.

 

문제 설명

app.tsx에서 다음 방법을 사용하여 Next.js 프로젝트에 Microsoft Clarity를 추가하려고 할 때, 일반적인 React 프로젝트에서는 발생하지 않지만 Next.js에서는 문제가 나타납니다.

<Script
  id="clarity"
  strategy="afterInteractive"
  dangerouslySetInnerHTML={{
    __html: `
    (function(c,l,a,r,i,t,y){
      c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
      t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
      y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
  })(window, document, "clarity", "script", '${CLARITY_KEY}');`,
  }}
/>

 

해결 방법: ID 충돌 해결

문제의 근본 원인은 ID 충돌입니다. 스크립트 태그의 ID(id="clarity")가 Clarity 스크립트의 내부 명명 규칙과 충돌하여 Uncaught TypeError를 유발합니다. 따라서 Script tag의 id에서 충돌을 피하기 위해 더 구체적이고 유니크한 식별자로 ID를 변경합니다. 예를 들어, `ms_clarity`로 변경하면 전역 네임스페이스 내에서 함수 호출 오류로 이어질 수 있는 이름 충돌을 방지할 수 있습니다.

 

<Script
  id="ms_clarity"
  strategy="afterInteractive"
  dangerouslySetInnerHTML={{
    __html: `
    (function(c,l,a,r,i,t,y){
      c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
      t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
      y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
  })(window, document, "clarity", "script", '${CLARITY_KEY}');`,
  }}
/>