Ionic React集成AWS Amplify报错：注册登录功能异常

问题背景 #

作为AWS新手，尝试将注册登录表单对接AWS，目标：

• 通过signUp在用户池中创建用户
• 通过signIn登录应用

实际启动应用后触发错误：Error: Amplify has not been configured correctly，完整错误信息如下：

File: https://localhost/assets/index-75803d82.js - Line 222 - Msg: [ERROR] 47:44.22 AuthError - Error: Amplify has not been configured correctly. The configuration object is missing required auth properties. This error is typically caused by one of the following scenarios:
 
1. Did you run amplify pushafter adding auth viaamplify add auth`? See https://aws-amplify.github.io/docs/js/authentication#amplify-project-setup
 
for more information 2. This could also be caused by multiple conflicting versions of amplify packages, see (https://docs.amplify.aws/lib/troubleshooting/upgrading/q/platform/js)
 
for help upgrading Amplify packages.

已执行操作 #

• 在AWS控制台创建UserPool
• 创建IAM用户
• 执行Amplify Configure、Amplify Init、Amplify import auth、Amplify push命令
• 实现自定义signUp/signIn组件
• 添加aws-exports.d.ts类型文件（未找到aws-exports.js）
• 执行Ionic cap sync android和Ionic cap open命令

已尝试方案 #

• 通过amplify add auth创建默认用户池，曾成功注册一次，但后续仍触发相同错误
• 使用withAuthenticator包裹App时登录功能正常，但无法适配自定义代码

修复步骤 #

1. 生成并确认aws-exports.js文件

aws-exports.js是Amplify配置的核心文件，必须存在：

• 重新执行amplify push，确保命令无报错，执行完成后项目根目录（或src目录）会自动生成该文件
• 若手动导入已有UserPool，确认amplify import auth时选择了正确的用户池，且同步配置完成
• 若仍未生成，删除项目根目录的.amplify文件夹，重新执行amplify init → amplify import auth → amplify push

2. 在应用入口正确初始化Amplify

必须在任何Amplify服务调用前完成配置，在项目入口文件（如App.tsx/main.tsx）顶部添加：

import { Amplify } from 'aws-amplify';
import awsConfig from './aws-exports'; // 路径需与实际文件位置匹配

Amplify.configure(awsConfig);

// 后续代码（如setupIonicReact()、组件渲染等）

3. 修复TypeScript类型文件语法

aws-exports.d.ts存在语法错误，修正为：

declare const awsmobile: Record<string, any>;
export default awsmobile;

4. 统一Amplify依赖版本

版本冲突可能导致配置异常，执行命令同步版本：

# npm
npm install aws-amplify@latest @aws-amplify/ui-react@latest

# yarn
yarn add aws-amplify@latest @aws-amplify/ui-react@latest

5. 验证自定义组件的调用时机

确保signUp/signIn函数在Amplify初始化完成后才被触发，避免在组件初始化阶段（如无依赖的useEffect）直接调用Auth方法。

6. 检查用户池配置（针对自定义属性）

若使用自定义属性（如custom:code_postal），需确认：

• 用户池的属性设置中已添加这些自定义字段
• 用户池的App client配置允许用户在注册时写入这些属性

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