AWS Amplify React UI Authenticator 无法渲染问题求助

以下是针对空白页面问题的逐一排查步骤和解决方案：

1. 验证aws-exports配置文件 #

• 确认amplify push成功后，项目根目录生成了aws-exports.js（TS项目需确保可导入该文件），打开文件检查是否包含完整的Auth配置项，比如aws_user_pools_id、aws_user_pools_web_client_id等关键字段，若字段为空或缺失，重新执行amplify push同步配置。
• TS项目需确保tsconfig.json中开启了"allowJs": true，避免无法导入js格式的aws-exports文件，或者将aws-exports.js重命名为aws-exports.ts并添加类型声明。

2. 调整Amplify配置时机 #

将Amplify配置移至main.tsx中提前执行，确保组件渲染前完成初始化：

// main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';
import { Amplify } from 'aws-amplify';
import awsExports from './aws-exports';

Amplify.configure(awsExports);

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
);

3. 修复依赖版本兼容性 #

不同版本的aws-amplify与@aws-amplify/ui-react可能存在兼容性冲突，锁定兼容版本后重新安装：

npm uninstall aws-amplify @aws-amplify/ui-react
npm install aws-amplify@5.3.11 @aws-amplify/ui-react@5.1.0

安装完成后重启开发服务器。

4. 排查浏览器控制台错误 #

打开浏览器开发者工具（F12），查看Console和Network标签：

• 若存在CORS错误，前往Amplify Auth控制台，在"App integration"中添加当前开发域名到允许列表；
• 若存在Auth配置无效报错，核对aws-exports中的配置与Amplify控制台的Auth应用信息是否一致；
• 若存在TS类型错误，检查是否有未处理的类型问题导致组件渲染失败。

5. 简化组件测试 #

先移除自定义子组件，仅渲染基础Authenticator，验证是否能正常显示登录界面：

// App.tsx
import { Amplify } from 'aws-amplify';
import { Authenticator } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';
import awsExports from './aws-exports';

Amplify.configure(awsExports);

export default function App() {
    return <Authenticator />;
}

若能正常显示，再逐步添加子组件排查问题点。

6. 排除React StrictMode影响 #

部分Amplify版本在React StrictMode下存在渲染异常，暂时移除StrictMode测试：

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
    <App />
);

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