Next.js+TypeScript中react-hotjar 6.0.0初始化失败求助

你遇到的这个构建错误，核心原因是react-hotjar@6.0.0本身的代码存在语法问题——在库的index.js文件里，已经通过export const hotjar声明了同名常量，但在内部的initialize函数里又直接调用了hotjar(id, sv)，这属于重复声明标识符的问题，直接导致webpack解析失败。这是该版本库的已知bug。

有两种可行的处理方向：

• 降级react-hotjar到5.x系列版本，这个版本在Next.js+TypeScript环境下兼容性更好，很多用户验证过可以正常初始化
• 放弃使用react-hotjar库，直接手动注入Hotjar官方脚本，步骤如下：
  1. 在pages/_document.tsx（如果你用App Router，就改在app/layout.tsx）里，用Next.js的next/script组件注入脚本：

     import { Html, Head, Main, NextScript } from 'next/document';
     import Script from 'next/script';
     
     export default function Document() {
       const HJID = '你的Hotjar ID';
       const HJSV = '你的Hotjar版本号';
     
       return (
         <Html>
           <Head>
             <Script
               id="hotjar-init"
               strategy="afterInteractive"
               dangerouslySetInnerHTML={{
                 __html: `
                   (function(h,o,t,j,a,r){
                     h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
                     h._hjSettings={hjid:${HJID},hjsv:${HJSV}};
                     a=o.getElementsByTagName('head')[0];
                     r=o.createElement('script');r.async=1;
                     r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
                     a.appendChild(r);
                   })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
                 `,
               }}
             />
           </Head>
           <body>
             <Main />
             <NextScript />
           </body>
         </Html>
       );
     }
     

  2. 如果需要在组件里调用Hotjar API（比如自定义事件），先在项目里加个类型声明文件：

     // types/hotjar.d.ts
     interface Window {
       hj?: (...args: any[]) => void;
     }
     

     之后就能在组件里这样用：

     import { useEffect } from 'react';
     
     export default function MyComponent() {
       useEffect(() => {
         window.hj?.('event', '用户访问了我的组件');
       }, []);
       return <div>我的组件</div>;
     }
     

• Next.js官方文档里关于第三方脚本注入的内容，重点看next/script的不同加载策略
• Hotjar官方的网站集成指南，里面的纯脚本方案适配所有前端框架
• react-hotjar的GitHub仓库Issue区，搜索Next.js相关的构建问题，能找到其他用户的解决方案和版本兼容信息

内容的提问来源于stack exchange，提问作者lvd