AWS Amplify Authentication Configuration Error in Vite + React Application Problem

Question

I'm getting the following error when trying to configure AWS Amplify authentication in my Vite + React application:

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

Environment React 18 Vite 5.x AWS Amplify 6.0.x TypeScript 5.x Current Configuration My Amplify configuration:

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
     }
  });
}

My Vite configuration includes the necessary AWS Amplify compatibility settings:

// 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',
      },
    },
  },
})

The error occurs when the application initializes and tries to configure Amplify in main.tsx:

import { configureAmplify } from './lib/amplify-config.ts'
// ...
configureAmplify()

Environment variables: { userPoolId: "us-east-1_xxxxxx", userPoolWebClientId: "xxxxxxxxxxxxxxxxxxxxxx", region: "us-east-1" }

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

What I've Tried

Added the recommended Vite configuration for AWS Amplify
Verified that environment variables are properly set
Confirmed the imports are correct

What is the correct way to configure AWS Amplify authentication with Vite and React, and how can I resolve the loginWith undefined error? Am I missing a required configuration or import? I don't have loginWith called in any of my files throughout my project so this doesn't make any sense.

user3196156 · Accepted Answer · 2025-07-18 02:23:05Z

0

const amplifyConfig = {
  Auth: {
    Cognito: {
      region: "us-east-1",
      identityPoolId: import.meta.env.VITE_AWS_IDENTITY_POOL_ID,
      userPoolId: import.meta.env.VITE_AWS_USER_POOL_ID,
      userPoolClientId: import.meta.env.VITE_AWS_CLIENT_ID,
    }
  }
};

answered Jul 18 at 2:23

user3196156

412 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AWS Amplify Authentication Configuration Error in Vite + React Application Problem

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related