如何结合dotenv实现Google ReCAPTCHA？解决process未定义及密钥加载失败问题

核心问题排查与修复步骤 #

• 确认.env文件配置规范

  • 环境变量必须放在项目根目录的.env文件中（不可放在客户端子文件夹），变量名必须以REACT_APP_为前缀，示例：

    REACT_APP_RECAPTCHA_KEY=你的谷歌reCAPTCHA站点密钥
    

  • 修改.env文件后必须重启开发服务器，否则新变量不会生效。

• 解决process is not defined错误

  • 若使用Create React App（CRA）构建：
    CRA默认集成dotenv，若仍报错，可给密钥加兜底值避免渲染错误：

    const key = process.env.REACT_APP_RECAPTCHA_KEY || "";
    

  • 若使用Vite构建：
    Vite不再支持process.env，需改用import.meta.env获取环境变量：

    const key = import.meta.env.REACT_APP_RECAPTCHA_KEY || "";
    

• 验证密钥加载状态
  在组件中添加console.log(key)查看控制台输出：

  • 若输出undefined：检查.env文件位置、变量名拼写、密钥是否复制完整（无多余空格）
  • 若输出正确密钥：添加条件渲染避免空值传入组件：

    {key && <ReCAPTCHA sitekey={key} onChange={onChange} />}
    

修改后的完整示例代码 #

CRA项目版本 #

import { useState } from 'react';
import ReCAPTCHA from 'react-google-recaptcha';

const Login = () => {
  const key = process.env.REACT_APP_RECAPTCHA_KEY || "";
  const [captcha, setCaptcha] = useState(false);

  const onChange = (value) => {
    console.log("Captcha value:", value);
    setCaptcha(!!value); // 确保验证通过时才设为true
  };

  return (
    <div>
      <OAuth />
      {key && (
        <ReCAPTCHA
          sitekey={key}
          onChange={onChange}
        />
      )}
    </div>
  );
};

export default Login;

Vite项目版本 #

import { useState } from 'react';
import ReCAPTCHA from 'react-google-recaptcha';

const Login = () => {
  const key = import.meta.env.REACT_APP_RECAPTCHA_KEY || "";
  const [captcha, setCaptcha] = useState(false);

  const onChange = (value) => {
    console.log("Captcha value:", value);
    setCaptcha(!!value);
  };

  return (
    <div>
      <OAuth />
      {key && (
        <ReCAPTCHA
          sitekey={key}
          onChange={onChange}
        />
      )}
    </div>
  );
};

export default Login;

额外注意事项 #

• 不要将.env文件提交到版本控制，确保.gitignore中包含.env*规则（可保留.env.example作为模板）
• 生产环境部署时，需在平台（如Vercel、Netlify）的环境变量设置中手动添加REACT_APP_RECAPTCHA_KEY，不要依赖本地.env文件

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