ReactJS中AWS Amplify部署报错：找不到aws-exports模块

核心问题原因 #

你的部署环境里缺少aws-exports.js文件——这个文件是本地通过Amplify CLI生成的，默认会被加入.gitignore，所以推送到GitHub时不会被包含，导致Amplify构建时找不到它。

临时禁用Amplify配置的方法 #

如果只是做UI调试学习，可以临时跳过Amplify的配置，修改代码如下：

import React from 'react';

import NavBar from "../components/navbar";

import { Authenticator } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react';

// 注释掉Amplify配置相关代码
// import { Amplify } from 'aws-amplify';
// import awsmobile from '../aws-exports';
// Amplify.configure(awsmobile);

const Login = () =>{

  return (
    <div>
      <h3>Login</h3>
      <NavBar />
      <Authenticator>
        {({ signOut, user }) => (
          <main>
            <h1>Hello {user.username}</h1>
            <button onClick={signOut}>Sign out</button>
          </main>
        )}
      </Authenticator>
    </div>
  );
}
export default Login;

注意：这种修改后，Authenticator组件无法连接到AWS认证服务，仅能展示UI框架，无法完成实际登录逻辑，仅适合学习UI组件使用。

常规解决方法（适配实际功能） #

如果需要正常使用Amplify认证能力，有两种可行方式：

1. 取消aws-exports.js的Git忽略：打开项目根目录的.gitignore文件，删除aws-exports.js这一行，将该文件提交到GitHub。但此方式会暴露你的AWS资源配置信息，仅推荐用于个人学习项目。
2. 用环境变量注入配置：
   • 进入AWS Amplify控制台的对应项目，打开App settings > Environment variables
   • 添加环境变量REACT_APP_AWS_EXPORTS，值为本地aws-exports.js中的JSON内容（注意转义引号）
   • 修改代码从环境变量读取配置：

     import { Amplify } from 'aws-amplify';
     
     const awsmobile = JSON.parse(process.env.REACT_APP_AWS_EXPORTS);
     Amplify.configure(awsmobile);
     

其他排查方向 #

• 确认本地文件路径：你的导入路径是../aws-exports，说明该文件应在src/pages的上级目录（即src/目录下），检查本地文件结构是否与部署环境一致。
• 检查构建配置：如果项目用了自定义构建命令，确认没有遗漏复制或生成aws-exports.js的步骤。

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