Next.js集成Kochava v3.0.4出现模块导入错误求助

错误原因分析 #

• 第一个错误：Kochava的dist文件使用ES模块语法（import），但Node.js默认将其识别为CommonJS模块，导致语法报错。
• 第二个错误：手动添加"type":"module"后，ES模块要求导入路径必须包含完整文件扩展名（如.js），但Kochava内部导入未添加，导致找不到模块。

解决方案 #

方案1：使用Next.js内置的transpilePackages配置（推荐） #

Next.js 12支持直接转译指定的node_modules包，将Kochava转译为兼容Next.js的模块：

1. 在项目根目录的next.config.js中添加配置：

module.exports = {
  transpilePackages: ['kochava'],
}

2. 删除node_modules/kochava/package.json中手动添加的"type":"module"（避免冲突）。
3. 重启Next.js开发服务器，必要时重新安装依赖：

npm install
npm run dev

方案2：动态导入Kochava（仅在客户端执行） #

由于Kochava是Web SDK，仅需在浏览器环境运行，可以用Next.js的动态导入+ssr: false避免服务端加载：

// 在组件中使用
import dynamic from 'next/dynamic';
import { useEffect } from 'react';

const Kochava = dynamic(() => import('kochava'), { ssr: false });

// 初始化示例
useEffect(() => {
  if (typeof window !== 'undefined') {
    const kochavaInstance = new Kochava({ appGuid: '你的APP_GUID' });
    kochavaInstance.init();
  }
}, []);

方案3：修改Kochava内部导入路径（临时方案，不推荐） #

如果以上方案无效，可临时修改Kochava的导入文件，但注意下次npm install会覆盖修改：

1. 打开node_modules/kochava/dist/kochava.js，将所有相对导入路径添加.js扩展名：
   • 把import { Log } from "./utils/log";改为import { Log } from "./utils/log.js";
   • 同理修改其他类似的导入语句。
2. 保留node_modules/kochava/package.json中的"type":"module"。

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