Vite+React中AWS Amplify认证配置报错：loginWith未定义

错误信息 #

Uncaught TypeError: Cannot read properties of undefined (reading 'loginWith')
    at configureAmplify (amplify-config.ts:5:11)
    at main.tsx:11:1

环境信息 #

• React 18
• Vite 5.x
• AWS Amplify 6.0.x
• TypeScript 5.x

当前配置 #

Amplify配置代码 #

import { Amplify } from 'aws-amplify';

export function configureAmplify() {
  Amplify.configure({
    Auth: { 
      userPoolId: import.meta.env.VITE_AWS_USER_POOL_ID,
      userPoolWebClientId: import.meta.env.VITE_AWS_USER_POOL_WEB_CLIENT_ID,
      region: import.meta.env.VITE_AWS_REGION
     }
  });
}

Vite配置 #

// vite.config.ts
export default defineConfig({
  // ...other config
  resolve: {
    alias: {
      './runtimeConfig': './runtimeConfig.browser',
    },
   },
   define: {
    global: 'window',
    'process.env': process.env,
  },
  optimizeDeps: {
    esbuildOptions: {
      define: {
        global: 'globalThis',
      },
    },
  },
})

解决方案 #

1. 适配Amplify 6.x模块化架构 #

Amplify 6.x采用模块化设计，需显式注册Auth模块到Amplify核心，否则内部方法（如loginWith）会找不到对应实例。修改amplify-config.ts：

import { Amplify } from 'aws-amplify';
import { Auth } from 'aws-amplify/auth';

export function configureAmplify() {
  Amplify.configure({
    Auth: { 
      userPoolId: import.meta.env.VITE_AWS_USER_POOL_ID,
      userPoolWebClientId: import.meta.env.VITE_AWS_USER_POOL_WEB_CLIENT_ID,
      region: import.meta.env.VITE_AWS_REGION
     }
  });
  // 显式注册Auth模块
  Amplify.register(Auth);
}

2. 更新Vite兼容配置 #

调整Vite配置以适配Amplify 6.x的模块结构，替换原有vite.config.ts内容：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      'aws-amplify/auth': 'aws-amplify/auth/dist/index.js',
      'aws-amplify/core': 'aws-amplify/core/dist/index.js'
    }
  },
  define: {
    'process.env': {}
  },
  optimizeDeps: {
    include: ['aws-amplify']
  }
});

3. 确保环境变量加载时机 #

在main.tsx中先执行Amplify配置，再加载应用组件，避免环境变量未就绪的问题：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { configureAmplify } from './amplify-config';

// 优先配置Amplify
configureAmplify();

import App from './App';
import './index.css';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

4. 清理缓存重新安装依赖 #

删除node_modules、package-lock.json（或yarn.lock），执行以下命令重置依赖：

npm install
# 或 yarn install

之后重启Vite开发服务器。

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