ReactJS集成AWS Cognito遇Auth导出错误，求技术解决方案

核心原因 #

AWS Amplify v6及以上版本采用模块化架构，不再支持import { Auth } from 'aws-amplify'这种命名导入方式，这是触发does not provide an export named 'Auth'错误的直接原因。

具体修复步骤 #

1. 确认Amplify版本 #

先检查当前aws-amplify版本，执行命令：

npm list aws-amplify

若版本为v6.x，按以下方式调整导入逻辑；若为v5及以下，直接检查导入语法是否符合旧版规范。

2. 调整Auth模块的导入方式 #

v6版本中，Auth功能需从aws-amplify/auth子模块单独导入：

// 替换旧的导入写法
// import { Auth } from 'aws-amplify';

// 使用v6模块化导入
import { Auth } from 'aws-amplify/auth';

3. 同步aws-exports.js的初始化逻辑 #

若你的初始化代码是旧版本写法，需改为v6兼容格式：

// 旧写法
// import Amplify from 'aws-amplify';
// import awsExports from './aws-exports';
// Amplify.configure(awsExports);

// v6写法
import { Amplify } from 'aws-amplify';
import awsExports from './aws-exports';
Amplify.configure(awsExports);

注：v6中Amplify仍支持默认导出，但Auth等核心功能必须从对应子模块导入。

4. 适配@aws-amplify/ui-react组件使用 #

若使用了Amplify认证UI组件（如withAuthenticator），需确保导入路径及样式引用正确：

// 旧写法
// import { withAuthenticator } from '@aws-amplify/ui-react';

// v6写法
import { withAuthenticator } from '@aws-amplify/ui-react';
// 必须导入组件样式
import '@aws-amplify/ui-react/styles.css';

5. 清理缓存并重启服务 #

修改代码后，清理Vite缓存并重启开发服务，避免缓存导致的加载异常：

npm run dev -- --force

额外建议 #

• 你同时安装了oidc-client-ts、react-oidc-context和aws-amplify，建议明确技术栈选型：若用AWS Amplify认证方案，可暂时停用OIDC相关依赖避免冲突；若选择原生OIDC集成，可移除Amplify相关依赖，专注react-oidc-context配置。
• 优先参考AWS Amplify官方v6文档的React集成内容，避免使用过时的v5教程。

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