Next.js 13+TypeScript集成reCAPTCHA部署Vercel构建报错求助

可能的原因及解决步骤 #

1. 类型声明冲突或版本不匹配 #

如果单独安装了@types/react-google-recaptcha，但当前react-google-recaptcha版本已经自带类型定义，会导致类型冲突——本地开发环境可能因缓存或类型解析优先级未暴露问题，但Vercel干净构建时触发错误。

• 执行卸载命令清理冲突依赖：

  npm uninstall react-google-recaptcha @types/react-google-recaptcha
  

• 重新安装最新版react-google-recaptcha（当前版本已内置类型，无需额外安装@types包）：

  npm install react-google-recaptcha
  

2. 未声明客户端组件（Next.js 13 App Router场景） #

若表单组件位于app目录下，Next.js 13默认将其视为服务器组件，而reCAPTCHA依赖浏览器环境，必须标记为客户端组件：

• 在表单组件文件顶部添加'use client';指令：

  'use client';
  import ReCAPTCHA from "react-google-recaptcha";
  
  const ContactForm = () => {
    // 组件逻辑
  };
  export default ContactForm;
  

3. 第三方包转译配置缺失 #

部分旧版react-google-recaptcha采用CommonJS格式，Next.js 13构建时未自动转译第三方包，导致组件解析失败：

• 在next.config.js中添加转译配置：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    transpilePackages: ['react-google-recaptcha'],
  };
  
  module.exports = nextConfig;
  

4. 组件使用方式检查 #

确保组件导入和props使用正确，比如必须传入sitekey属性：

<ReCAPTCHA sitekey="你的Google reCAPTCHA站点密钥" onChange={handleCaptchaChange} />

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