AuthError: Amplify未正确配置，React JS项目中AWS Cognito功能无法使用

问题根因 #

你虽然引入了aws-exports配置文件，但没有将配置传递给Amplify实例完成初始化，才会抛出Amplify has not been configured correctly报错。

修正方案 #

在原有代码中新增Amplify导入和初始化逻辑即可，修正后的完整代码如下：

import React from 'react';
// 新增Amplify导入
import { Amplify } from 'aws-amplify';
import { withAuthenticator } from 'aws-amplify-react';
import config from './aws-exports';

// 新增配置初始化代码
Amplify.configure(config);

function App() {
  return (
    <div>
        <b>Hello World..</b>
    </div>
  );
}

export default withAuthenticator(App, {includeGreetings: true});

其他排查项 #

如果添加上述代码后仍然报错，可逐一检查以下内容：

• 确认aws-exports.js文件的导入路径正确，该文件默认生成在项目根目录或者src目录下，如果你的代码文件在子目录中，需要调整相对路径
• 确认amplify add auth和amplify push是在当前项目的根目录执行，避免配置生成到了其他项目路径下
• 检查依赖版本兼容性：如果你使用的是v6版本的aws-amplify，aws-amplify-react已经停止维护，需要替换为@aws-amplify/ui-react依赖，对应withAuthenticator的导入来源也需要调整为@aws-amplify/ui-react
• 如果你切换过Amplify环境或者拉取过其他环境的配置，确认aws-exports.js中的Cognito资源ID和你AWS账号控制台中的资源配置一致

报错截图如下：

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