Loading...
![[GPT] PMP 시험 대비: 프로젝트 관리 핵심 주제 요약 및 예상 문제](/_next/image?url=https%3A%2F%2Fd2gg9iclns4v4e.cloudfront.net%2Fimages%2Fnews%2F1726027822117_pmp%20book.webp&w=256&q=75)
Microsoft Clarity 통합 시 Uncaught TypeError: a[c] is not a function 오류 해결 방법
KUKJIN LEE • 7개월 전 작성
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}');`,
}}
/>