AWS Amplify not building on Expo Web

[DanWilkins2107]

Before opening, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have read the guide for submitting bug reports.
• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

React Native

Amplify APIs

Not applicable

Amplify Version

v6

Amplify Categories

auth

Backend

Other

Environment information

# Put output below this line
  System:
    OS: Windows 11 10.0.26100
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1185G7 @ 3.00GHz
    Memory: 4.93 GB / 15.72 GB
  Binaries:
    Node: 22.15.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.9.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (136.0.3240.50)
  npmPackages:
    @aws-amplify/react-native: ^1.1.9 => 1.1.9
    @babel/core: ^7.25.2 => 7.27.1
    @expo/vector-icons: ^14.1.0 => 14.1.0
    @react-native-async-storage/async-storage: ^2.1.2 => 2.1.2
    @react-native-community/netinfo: ^11.4.1 => 11.4.1
    @react-navigation/bottom-tabs: ^7.3.10 => 7.3.13
    @react-navigation/elements: ^2.3.8 => 2.4.2
    @react-navigation/native: ^7.1.6 => 7.1.9
    @types/react: ~19.0.10 => 19.0.14
    aws-amplify: ^6.14.4 => 6.14.4
    aws-amplify/adapter-core:  undefined ()
    aws-amplify/adapter-core/internals:  undefined ()
    aws-amplify/analytics:  undefined ()
    aws-amplify/analytics/kinesis:  undefined ()
    aws-amplify/analytics/kinesis-firehose:  undefined ()
    aws-amplify/analytics/personalize:  undefined ()
    aws-amplify/analytics/pinpoint:  undefined ()
    aws-amplify/api:  undefined ()
    aws-amplify/api/internals:  undefined ()
    aws-amplify/api/server:  undefined ()
    aws-amplify/auth:  undefined ()
    aws-amplify/auth/cognito:  undefined ()
    aws-amplify/auth/cognito/server:  undefined ()
    aws-amplify/auth/enable-oauth-listener:  undefined ()
    aws-amplify/auth/server:  undefined ()
    aws-amplify/data:  undefined ()
    aws-amplify/data/server:  undefined ()
    aws-amplify/datastore:  undefined ()
    aws-amplify/in-app-messaging:  undefined ()
    aws-amplify/in-app-messaging/pinpoint:  undefined ()
    aws-amplify/push-notifications:  undefined ()
    aws-amplify/push-notifications/pinpoint:  undefined ()
    aws-amplify/storage:  undefined ()
    aws-amplify/storage/s3:  undefined ()
    aws-amplify/storage/s3/server:  undefined ()
    aws-amplify/storage/server:  undefined ()
    aws-amplify/utils:  undefined ()
    eslint: ^9.25.0 => 9.27.0
    eslint-config-expo: ~9.2.0 => 9.2.0
    expo: ~53.0.9 => 53.0.9
    expo-blur: ~14.1.4 => 14.1.4
    expo-constants: ~17.1.6 => 17.1.6
    expo-font: ~13.3.1 => 13.3.1
    expo-haptics: ~14.1.4 => 14.1.4
    expo-image: ~2.1.7 => 2.1.7
    expo-linking: ~7.1.5 => 7.1.5
    expo-router: ~5.0.6 => 5.0.7
    expo-splash-screen: ~0.30.8 => 0.30.8
    expo-status-bar: ~2.2.3 => 2.2.3
    expo-symbols: ~0.4.4 => 0.4.4
    expo-system-ui: ~5.0.7 => 5.0.7
    expo-web-browser: ~14.1.6 => 14.1.6
    react: 19.0.0 => 19.0.0
    react-dom: 19.0.0 => 19.0.0
    react-native: 0.79.2 => 0.79.2
    react-native-gesture-handler: ~2.24.0 => 2.24.0
    react-native-get-random-values: ^1.11.0 => 1.11.0
    react-native-reanimated: ~3.17.4 => 3.17.5
    react-native-safe-area-context: 5.4.0 => 5.4.0
    react-native-screens: ~4.10.0 => 4.10.0
    react-native-web: ~0.20.0 => 0.20.0
    react-native-webview: 13.13.5 => 13.13.5
    typescript: ~5.8.3 => 5.8.3
  npmGlobalPackages:
    firebase-tools: 14.4.0

Describe the bug

When I create an expo app (npx create-expo-app@latest ), and then try to add AWS amplify (by running npm install aws-amplify @aws-amplify/react-native @react-native-community/netinfo @react-native-async-storage/async-storage react-native-get-random-values) as described in the docs. When I run npx expo start --web, I get a metro build error saying "Metro error: Cannot read properties of undefined (reading 'v1')". Further stack trace here:

TypeError: Cannot read properties of undefined (reading 'v1')
    at factory (C:\Users\danwi\AmplifyAuthTest\node_modules\@aws-amplify\core\node_modules\uuid\wrapper.mjs:2:24)
    at loadModuleImplementation (C:\Users\danwi\AmplifyAuthTest\node_modules\metro-runtime\src\polyfills\require.js:277:5)
    at guardedLoadModule (C:\Users\danwi\AmplifyAuthTest\node_modules\metro-runtime\src\polyfills\require.js:184:12)
    at require (C:\Users\danwi\AmplifyAuthTest\node_modules\metro-runtime\src\polyfills\require.js:92:7)
    at factory (C:\Users\danwi\AmplifyAuthTest\node_modules\@aws-amplify\core\dist\esm\singleton\Amplify.mjs:9:1)
    at loadModuleImplementation (C:\Users\danwi\AmplifyAuthTest\node_modules\metro-runtime\src\polyfills\require.js:277:5)
    at guardedLoadModule (C:\Users\danwi\AmplifyAuthTest\node_modules\metro-runtime\src\polyfills\require.js:184:12)
    at require (C:\Users\danwi\AmplifyAuthTest\node_modules\metro-runtime\src\polyfills\require.js:92:7)
    at factory (C:\Users\danwi\AmplifyAuthTest\node_modules\@aws-amplify\core\dist\esm\index.mjs:3:1)
    at loadModuleImplementation (C:\Users\danwi\AmplifyAuthTest\node_modules\metro-runtime\src\polyfills\require.js:277:5)

Expected behavior

The website should load without a build error.

Reproduction steps

1. Create expo app
2. Do the installation mentioned above
3. Run the command mentioned in the description

Code Snippet

// Put your code below this line.
Changed App.js to

import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
import { useFonts } from 'expo-font';
import { Stack } from 'expo-router';
import { StatusBar } from 'expo-status-bar';
import 'react-native-reanimated';

import { useColorScheme } from '@/hooks/useColorScheme';
import { Amplify } from 'aws-amplify'

Amplify.configure({
  Auth: {
    Cognito: {
      userPoolId: '<redacted>',
      userPoolClientId: '<redacted>',
    }
  }
})

export default function RootLayout() {
  const colorScheme = useColorScheme();
  const [loaded] = useFonts({
    SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
  });

  if (!loaded) {
    // Async font loading only occurs in development.
    return null;
  }

  return (
    <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
      <Stack>
        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
        <Stack.Screen name="+not-found" />
      </Stack>
      <StatusBar style="auto" />
    </ThemeProvider>
  );
}
`

Log output

// Put your logs below this line

aws-exports.js

No response

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

[sarayev]

Hi @DanWilkins2107,

Thanks for reporting the issue. We've been able to reproduce the behaviour on our end, and investigating further to identify the path forward.

[shehryar-turing]

Analysis and Potential Solution

I've analyzed this issue and it appears to be related to how Metro bundler handles the uuid module when building for Expo web. The error Cannot read properties of undefined (reading 'v1') in uuid/wrapper.mjs suggests that Metro is having trouble resolving the uuid module's exports correctly.

Root Cause

The issue stems from:

1. Module Resolution Conflict: Metro bundler is trying to load the uuid module but encountering issues with the ESM wrapper file (wrapper.mjs)
2. Platform-specific Import Issues: Amplify Core uses different uuid import strategies for different platforms (see packages/core/src/utils/amplifyUuid/index.ts vs index.native.ts)
3. Metro Configuration: Expo web with Metro bundler may not be properly configured to handle the uuid module's export structure

Potential Solutions

Solution 1: Metro Configuration (Recommended)

Add a custom Metro configuration to your project to properly resolve the uuid module:

// metro.config.js
const { getDefaultConfig } = require('expo/metro-config');

const config = getDefaultConfig(__dirname);

// Add resolver configuration for uuid module
config.resolver.alias = {
  ...config.resolver.alias,
  'uuid': require.resolve('uuid'),
};

// Ensure proper module resolution
config.resolver.platforms = ['web', 'native', 'ios', 'android'];

module.exports = config;

Solution 2: Package Resolution Override

If the Metro config doesn't work, try adding a resolution override in your package.json:

{
  "resolutions": {
    "uuid": "^9.0.0"
  }
}

Solution 3: Polyfill Configuration

Since this is happening on Expo web, ensure you have the proper polyfills. Add this to your app entry point:

// At the top of your App.js or index.js
import 'react-native-get-random-values';
import { Amplify } from 'aws-amplify';

// Your Amplify configuration...

Solution 4: Alternative UUID Import

As a temporary workaround, you could try importing uuid differently in your Metro config:

// metro.config.js
const { getDefaultConfig } = require('expo/metro-config');

const config = getDefaultConfig(__dirname);

config.resolver.resolverMainFields = ['react-native', 'browser', 'main'];
config.resolver.platforms = ['web', 'native', 'ios', 'android'];

// Force uuid to use the CommonJS version
config.resolver.alias = {
  'uuid': require.resolve('uuid/dist/index.js'),
};

module.exports = config;

Additional Debugging Steps

1. Clear Metro Cache: Run npx expo start --clear to clear Metro's cache
2. Check Dependencies: Ensure all required dependencies are properly installed:

   npm install react-native-get-random-values @react-native-async-storage/async-storage @react-native-community/netinfo

3. Verify Expo Version: Make sure you're using a compatible Expo SDK version with Amplify v6

Why This Happens

This issue occurs because:

• Amplify Core depends on the uuid package for generating unique identifiers
• Metro bundler (used by Expo web) has different module resolution behavior compared to webpack
• The uuid package's ESM exports may not be properly resolved in the Metro + Expo web environment
• There's a mismatch between how the uuid module exports its functions and how Metro expects to import them

Long-term Fix

The Amplify team might consider:

1. Adding better Metro bundler compatibility
2. Providing platform-specific uuid implementations
3. Adding explicit Metro configuration examples in the documentation

Try Solution 1 first as it's the most comprehensive approach. Let me know if this resolves the issue!

[DanWilkins2107]

Thanks for the response! Unfortunately none of those has seemed to work though :(

Summary of attempts

Solution 1
Same error as before Cannot read properties of undefined (reading 'v1')

Solution 2
Same error as before Cannot read properties of undefined (reading 'v1')

Solution 3
Same error as before, added the below to an index.ts file and changed app entry point but didn't change

import 'react-native-get-random-values';
import 'react-native-url-polyfill/auto';
import { Amplify } from 'aws-amplify';
import 'expo-router/entry';

Solution 4
Get the following error

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './dist/index.js' is not defined by "exports" in C:\Users\danwi\ChessOpenings\newApp\node_modules\uuid\package.json
Error: Package subpath './dist/index.js' is not defined by "exports" in C:\Users\danwi\ChessOpenings\newApp\node_modules\uuid\package.json
    at exportsNotFound (node:internal/modules/esm/resolve:314:10)
    at packageExportsResolve (node:internal/modules/esm/resolve:661:9)
    at resolveExports (node:internal/modules/cjs/loader:657:36)
    at Function._findPath (node:internal/modules/cjs/loader:749:31)
    at Function._resolveFilename (node:internal/modules/cjs/loader:1387:27)
    at Function.resolve (node:internal/modules/helpers:145:19)
    at Object.<anonymous> (C:\Users\danwi\ChessOpenings\newApp\metro.config.js:11:19)
    at Module._compile (node:internal/modules/cjs/loader:1730:14)
    at Object..js (node:internal/modules/cjs/loader:1895:10)
    at Module.load (node:internal/modules/cjs/loader:1465:32)

Have tried a few different filepaths but haven't managed to make anything work. Any further ideas/suggestions would be great if possible!

[HuiSF]

This issue should be caused by the incompatibility between uuid v9 package.json exports and that the newer version of metro bundler enables package.json exports by default.

The latest version of uuid (^11.0.0) doesn't seem to have this issue. I think the library needs to bump the dependency version:

amplify-js/packages/core/package.json

Line 60 in 936c0f7

"uuid": "^9.0.0"

In the meantime, I think it's safe to use package overrides to get around of this issue by adding the following into the package.json of your project.

if use npm:

  "overrides": {
    "uuid": "^11.0.0"
  }

if use yarn:

  "resolution": {
    "uuid": "^11.0.0"
  }