React 应用如何从 src 目录外导入函数？适配Amplify场景兼顾后续部署

你遇到的报错本质是Create React App默认的安全构建规则：react-scripts会将主项目的/src目录设为模块解析的安全边界，拦截所有从主src目录外部引入的模块。结合你项目存在两个独立src目录（前端主src、Amplify Lambda函数独立src）、需要兼容后续Amplify部署流程的场景，按推荐优先级排序解决方案如下：

方案1：走Amplify标准的API调用流程（最推荐，零配置适配部署） #

注意：cognitoActions.js一般是Amplify自动生成的AdminQueries Lambda函数的服务端逻辑，包含Cognito管理员类的操作（比如查用户列表、改用户权限、重置用户密码），这类操作本来就不适合在前端浏览器端直接调用，硬导入会把服务端专属的SDK、管理员权限逻辑打到前端包中，既会带来安全风险，也会造成包体冗余。

• 前端App.js中不需要直接导入cognitoActions.js的方法，直接通过Amplify客户端SDK调用已经部署到云环境的Lambda接口即可
• 这种方式不需要修改任何构建配置，完全兼容Amplify的CI/CD全流程，从根源上消除跨目录导入的问题，同时符合前后端分离的安全要求，不会出现管理员权限逻辑暴露在前端的风险

方案2：提取公共逻辑到独立共享目录（长期维护友好） #

如果cognitoActions.js里的部分方法是前后端通用的纯逻辑（不涉及服务端专属SDK调用），可以重构代码结构，消除跨目录硬导入：

• 在项目根目录新建独立的shared/目录，把两边都需要用的通用方法从原文件中提取到这个目录下
• 分别在前端主src/App.js、Amplify Lambda的src/cognitoActions.js中导入shared/目录下的方法
• 配套在项目根目录的jsconfig.json（TS项目则修改tsconfig.json）中配置路径别名，让CRA的构建工具可以正常识别shared目录，不会触发安全拦截，配置参考：

  {
    "compilerOptions": {
      "baseUrl": ".",
      "paths": {
        "@shared/*": ["shared/*"]
      }
    },
    "include": ["src", "shared"]
  }
  

• 这种方式不会破坏Amplify的默认构建流程，后续部署不会出现配置异常，同时明确区分了纯公共逻辑、服务端专属逻辑、前端专属逻辑，长期维护成本更低

方案3：临时调整构建白名单（仅适合快速过渡） #

如果需要临时绕开报错快速调试，不要执行npm run eject，可以通过非侵入式的配置工具放宽CRA的跨目录导入限制：

• 用react-app-rewired这类非侵入式配置工具修改webpack规则，把Amplify后端函数的src目录加入模块解析白名单
• 注意：这个方案仅适合本地调试使用，不要带到生产部署流程中，否则很容易把仅服务端可用的依赖（比如aws-sdk）打包到前端产物中，造成前端运行时权限报错、包体过大的问题

常见踩坑提醒 #

• 不要尝试通过多层相对路径跳转（比如../../../../amplify/...）绕开导入校验，CRA的校验机制会自动识别所有跳出主src目录的导入，这种操作不会解决问题，反而会触发构建告警
• 不要直接eject react-scripts配置，这会完全打乱Amplify默认的前端构建流程，导致后续amplify push时无法正常上传部署前端资源

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