When using the latest version of React Native Expo with Amplify, AWS IoT Client Encounters Undefined Module Bug

[DaPhysikist]

Checkboxes for prior research

• I've gone through Developer Guide and API reference
• I've checked AWS Forums and StackOverflow.
• I've searched for previous similar issues and didn't find any solution.

Describe the bug

I followed the steps outlined in Amplify's documentation for setting up a new React Native app with Expo. Setting up the app and Amplify went smoothly. However, the issue occurs when I try to incorporate the Javascript SDK into my project, and I suspect that the issue may be compatibility between Expo and the SDK, as I encountered no issues using the js-tests repo with React Native (that repo does not use Expo).

Here is a snippet of my package.json

I am trying to use the IoT Core client in my React Native app and am initializing it like this:

const client = new IoTClient({
    region: 'us-west-1',
    credentials: {
      accessKeyId,
      secretAccessKey,
      sessionToken,
    },
  });

I have these imports in my index.tsx:
import "react-native-get-random-values";
import "react-native-url-polyfill/auto";
import "web-streams-polyfill/dist/polyfill";

I am unsure what could be causing the problem since I followed all required steps and the error is not very descriptive. Would appreciate if I could get help with this issue, potentially there are additional steps needed for Expo that I am unaware of?

Regression Issue

• Select this option if this issue appears to be a regression.

SDK version number

"@aws-sdk/client-iot": "^3.782.0"

Which JavaScript Runtime is this issue in?

Node.js

Details of the browser/Node.js/ReactNative version

23.6.0

Reproduction Steps

Setup an AWS Amplify React Native app with Expo. Steps here: https://docs.amplify.aws/react-native/start/quickstart/

Then in index.tsx:

import React from 'react';
import { Authenticator } from '@aws-amplify/ui-react-native';
import { Amplify } from 'aws-amplify';
import outputs from '../amplify_outputs.json';

Amplify.configure(outputs);

import "react-native-get-random-values";
import "react-native-url-polyfill/auto";
import "web-streams-polyfill/dist/polyfill";
import AppContent from './AppContent';

const App: React.FC = () => {
  return (
    <Authenticator.Provider>
      <Authenticator>
        <AppContent />
      </Authenticator>
    </Authenticator.Provider>
  );
};

export default App;

and in a separate file called AppContent.tsx:

import React, { useEffect, useState } from 'react';
import { View, Text, ActivityIndicator, StyleSheet } from 'react-native';
import { fetchAuthSession } from 'aws-amplify/auth';
import { IoTClient } from '@aws-sdk/client-iot';

const AppContent = () => {
  const [iotClient, setIotClient] = useState<IoTClient | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const initializeAwsClient = async () => {
      try {
        const session = await fetchAuthSession();
        const credentials = session.credentials;

        if (!credentials) {
          throw new Error('No credentials found');
        }

        const client = new IoTClient({
          region: 'us-west-1',
          credentials: {
            accessKeyId: credentials.accessKeyId,
            secretAccessKey: credentials.secretAccessKey,
            sessionToken: credentials.sessionToken,
          },
        });

        setIotClient(client);
      } catch (err: any) {
        setError(err.message || 'Failed to initialize IoT client');
      } finally {
        setLoading(false);
      }
    };

    initializeAwsClient();
  }, []);

  if (loading) {
    return (
      <View style={styles.center}>
        <ActivityIndicator size="large" color="#007AFF" />
        <Text>Initializing AWS IoT client...</Text>
      </View>
    );
  }

  return (
    <View style={styles.center}>
      {error ? (
        <Text style={{ color: 'red' }}>Error: {error}</Text>
      ) : (
        <Text>AWS IoT Client is ready</Text>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  center: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default AppContent;

Observed Behavior

When my Android app is bundled, I get this error:

 (NOBRIDGE) ERROR  Error: Requiring unknown module "undefined". If you are sure the module exists, try restarting Metro. You may also want to run `yarn` or `npm install`. [Component Stack]. 

Expected Behavior

I expected to be able to create a new IoTClient without encountering any bugs.

Possible Solution

No response

Additional Information/Context

No response

[aBurmeseDev]

Hi @DaPhysikist - thanks for creating new issue here.

Upon looking into this specific error you're getting, I think the culprit is one of the React Native packages rather than AWS SDK. Here are a few things you can try:

• yarn add react-native-screens react-native-safe-area-context or npx expo install react-native-screens react-native-safe-area-context if it's Expo managed
• rm -rf ./node_modules then yarn or npm install

Hope that helps!

[DaPhysikist]

@aBurmeseDev What version of these packages would you recommend using to avoid breakage with the SDK? Again there was no issue using Amplify with the versions I have shown above in the image I attached of my installed packages. The issue only occurs when I make an SDK specific client.

[DaPhysikist]

@aBurmeseDev I finally solved the issue, simply needed to switch my React native screens version to 4.10.0. Thank you for your help.

[github-actions]

This issue is now closed. Comments on closed issues are hard for our team to see.
If you need more assistance, please open a new issue that references this one.

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs and link to relevant comments in this thread.