Amplify JS升级v6后作为Node模块在Web应用中失效求助

核心原因 #

Amplify v6对Web和React Native的配置加载逻辑做了拆分，你的私有模块若沿用v5的全局配置方式，会导致Web端无法正确识别UserPool配置，而RN端因兼容逻辑暂时正常。

具体修复步骤 #

1. 调整私有模块的Amplify初始化逻辑 #

v6不再支持Web端自动读取aws-exports.js，必须显式初始化Auth模块：

// 共用模块的Auth初始化文件（Web端专用）
import { Auth } from 'aws-amplify/auth';
import { Amplify } from 'aws-amplify';
import awsExports from '../aws-exports'; // 可改为让业务项目传入配置，提升灵活性

// Web端需显式禁用SSR（默认开启会延迟配置加载）
Amplify.configure({ ...awsExports }, { ssr: false });
// 单独初始化Auth模块，确保配置注入
Auth.configure(awsExports);

2. 区分跨平台配置分支 #

在共用模块入口中通过平台判断拆分逻辑，适配Web和RN：

import { Platform } from 'react-native';
import { Auth, Amplify } from 'aws-amplify';
import awsExports from './aws-exports';

if (Platform.OS === 'web') {
  Amplify.configure({ ...awsExports }, { ssr: false });
  Auth.configure(awsExports);
} else {
  // RN端沿用原有初始化逻辑即可
  Amplify.configure(awsExports);
}

3. 统一依赖版本 #

确保私有模块与Web项目的Amplify版本完全一致，避免版本冲突：

• 私有模块package.json锁定版本：

  "dependencies": {
    "aws-amplify": "^6.0.0",
    "aws-amplify/auth": "^6.0.0"
  }
  

• 执行依赖安装后，检查锁文件（package-lock.json/yarn.lock）中Amplify版本是否统一。

4. 验证配置注入状态 #

在Web项目调用Auth方法前，打印配置确认是否加载成功：

console.log('当前Auth配置:', Auth.configure());

若输出为空或缺少userPoolId/userPoolWebClientId，需检查共用模块的导出逻辑是否正确传递配置。

常见坑点 #

• v6中Amplify.configure()不再自动初始化所有服务，每个模块（Auth/API等）需单独调用configure；
• Web端默认开启SSR模式，会导致配置加载延迟，必须显式关闭；
• 若私有模块用peerDependencies引入Amplify，需确保业务项目安装的版本符合模块要求。

内容的提问来源于stack exchange，提问作者MÖRK