React项目中.env存储的Stripe发布密钥无法读取问题

以下是排查和解决的具体步骤：

• 确认.env文件的位置和命名
  必须将.env文件放在项目根目录（和package.json文件同级），不能放在src或其他子文件夹下；文件名必须严格是.env，不能加任何后缀（比如.env.dev），否则React无法识别加载。

• 修正.env里的变量格式
  变量名必须以REACT_APP_开头，且等号两边不能有空格，正确格式如下：

  REACT_APP_STRIPE=pk_test_51LJh5TCx0CP76PWrc0hRSESvbF00x8voeXAS...
  

  若等号前后有空格，会导致变量值读取为undefined。

• 重启开发服务器
  React仅在启动开发服务器时加载.env文件，修改.env后必须完全关闭当前的npm start/yarn start进程，重新启动服务器才能让新的变量生效。

• 排查环境文件冲突
  若项目中存在.env.development、.env.production等环境专属配置文件，开发环境会优先加载.env.development。如果该文件中存在同名变量但未赋值，会覆盖.env中的值，导致读取结果为undefined。

• 自定义Webpack项目额外配置
  若你的项目不是用Create React App生成的，而是自定义Webpack配置，需要额外安装dotenv包，并在Webpack配置中添加如下代码来加载.env文件：

  const dotenv = require('dotenv');
  dotenv.config();
  
  module.exports = {
    // 其他配置
    plugins: [
      new webpack.DefinePlugin({
        'process.env.REACT_APP_STRIPE': JSON.stringify(process.env.REACT_APP_STRIPE)
      })
    ]
  };
  

按上述步骤调整后，重新启动项目，process.env.REACT_APP_STRIPE就能正确读取到Stripe密钥，ReactStripeCheckout组件也不会再报stripeKey为undefined的错误。

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