React环境变量跨文件访问问题：导入Amazon Cognito用户池配置文件时无法读取环境变量

嘿，我帮你梳理下问题里的几个关键点，一步步解决这个认证功能的报错：

1. 先修复Cognito用户池的实例化错误 #

你的Userpool.js里创建用户池的时候漏了new关键字！直接调用CognitoUserPool()而不是new CognitoUserPool()，会导致没有生成正确的实例，后续调用方法自然会出问题：

// 错误写法
export const userPool = CognitoUserPool(poolData_user)
export const adminPool = CognitoUserPool(poolData_admin)

// 正确写法
export const userPool = new CognitoUserPool(poolData_user)
export const adminPool = new CognitoUserPool(poolData_admin)

2. 修正SignUp方法的拼写错误 #

你在handleButtonClick里写的是userPool.singUp，正确的方法名是signUp（少了个字母n），这个拼写错误也会导致调用失败：

// 错误写法
userPool.singUp('someEmail','somePassword',[],null,(err,result)=>{...})

// 正确写法
userPool.signUp('someEmail','somePassword',[],null,(err,result)=>{...})

3. React环境变量的正确用法（不用手动引入dotenv） #

在Create React App（CRA）项目里，完全不需要手动导入dotenv——CRA已经内置了对环境变量的支持，只要满足以下条件，变量会自动注入到process.env中：

• 环境变量文件必须放在项目根目录（和package.json同级），命名为.env（或者.env.development/.env.production这类环境特定文件）
• 变量名必须以REACT_APP_开头，比如你用的REACT_APP_USERPOOL_ID_USER，这个前缀是CRA识别环境变量的标志
• 修改.env文件后，必须重启开发服务器（停止npm start再重新启动），否则新的变量不会生效

4. 加个验证确保环境变量加载正常 #

可以在Userpool.js里加个简单的验证函数，启动时就检查所有必要的环境变量是否存在，避免后续踩坑：

import { CognitoUserPool } from 'amazon-cognito-identity-js'

// 验证必要的环境变量是否存在
const checkEnvVars = () => {
  const requiredVars = [
    'REACT_APP_USERPOOL_ID_USER',
    'REACT_APP_CLIENT_ID_USER',
    'REACT_APP_USERPOOL_ID_ADMIN',
    'REACT_APP_CLIENT_ID_ADMIN'
  ]
  const missing = requiredVars.filter(varName => !process.env[varName])
  if (missing.length) {
    throw new Error(`Missing required env vars: ${missing.join(', ')}`)
  }
}

checkEnvVars()

const poolData_user = {
  UserPoolId: process.env.REACT_APP_USERPOOL_ID_USER,
  ClientId: process.env.REACT_APP_CLIENT_ID_USER
}
const poolData_admin = {
  UserPoolId: process.env.REACT_APP_USERPOOL_ID_ADMIN,
  ClientId: process.env.REACT_APP_CLIENT_ID_ADMIN
}

export const userPool = new CognitoUserPool(poolData_user)
export const adminPool = new CognitoUserPool(poolData_admin)

最后再走一遍检查流程 #

1. 确认.env文件在项目根目录，所有变量名都是REACT_APP_开头，值正确
2. 重启你的React开发服务器
3. 修复好new关键字和signUp的拼写错误
4. 再测试注册按钮，应该就能正常工作了

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