I am working on a project with AWS-SDK V3, Cognito and AWS. I am struggling to setup basic functions, and keep getting errors like: ReferenceError: Property 'ReadableStream' doesn't exist. I can't find anything online, and I am questioning if this is even a good authentication approach for a scalable react native application. Has anyone dealt with this issue or know how to fix it? I am simply trying to use an "initiateauthcommand" from the V3 library, but clearly there are some compatability issues.

For context, I am using an EXPO development environment for my react native ios mobile app.

I tried using metro bundler fixes, doing pollyfilling, none of it worked. I am stumped.

I am working on a project with AWS-SDK V3, Cognito and AWS. I am struggling to setup basic functions, and keep getting errors like: ReferenceError: Property 'ReadableStream' doesn't exist. I can't find anything online, and I am questioning if this is even a good authentication approach for a scalable react native application. Has anyone dealt with this issue or know how to fix it? I am simply trying to use an "initiateauthcommand" from the V3 library, but clearly there are some compatability issues.

For context, I am using an EXPO development environment for my react native ios mobile app.

I tried using metro bundler fixes, doing pollyfilling, none of it worked. I am stumped.

• javascript
• react-native
• amazon-cognito
• aws-sdk

7 Answers 7

Ensure you've added the required polyfills for ReadableStream in your React Native Expo project. Try these imports:

import 'react-native-get-random-values';
import 'react-native-url-polyfill/auto';
import { ReadableStream } from 'web-streams-polyfill/ponyfill';
globalThis.ReadableStream = ReadableStream;

Install necessary packages:

npm install react-native-get-random-values react-native-url-polyfill web-streams-polyfill

If the issue persists, check for library updates and ensure compatibility with React Native. Consider exploring other authentication options based on your project needs.

If you are facing Issue using the latest web-streams-polyfill v -^4.0.0

It can be used as below or mentioned here

    import { ReadableStream } from "web-streams-polyfill";
    
    if (typeof global.ReadableStream === "undefined") {
       global.ReadableStream = ReadableStream;
    }

I faced a similar problem with Node version v22.11.0 in a new React Native Expo project. If possible, downgrade and try using Node version v20.18.0

Worked for me!

Steve Matthew's answer works with "[email protected]", but fails with "[email protected]".

With 4.0.0, I get the error ‘Unable to resolve module web-streams-polyfill/ponyfill’.

With 4.0.0, there is no ponyfill folder: https://www.npmjs.com/package/web-streams-polyfill/v/4.0.0?activeTab=code

as opposed to 3.3.3 which does have this: https://www.npmjs.com/package/web-streams-polyfill/v/3.3.3?activeTab=code

A short term fix is to use 3.3.3. Does anyone have an equivalent to Steve's fix using 4.0.0.

Using Expo 51, ios app, ReadableStream required when working with Amazon Location SDKv3.

In my case this error was resolved using "@aws-sdk/client-cognito-identity" V3.549.0, previously I used V3.606.0, if you are using this package keep this in mind

I was getting the same error and I tried importing from the polyfill libs.

That worked, but I ran into some other issues with the payload that was being sent to the SES client for email. Once I fixed the payload structure, the emails delivered successfully. The strange thing is that I then removed the polyfill imports and the emails still sent successfully.

So I am thinking that the error you are receiving could be a catch-all error perhaps as the actual error dealt with the payload structure? Other parts of the AWS SDK may require the polyfill, but what I am using does not.

I had to use this with the latest expo and web-streams-polyfill:

import { Predictions } from "@aws-amplify/predictions";
import "react-native-url-polyfill/auto";
import { ReadableStream } from "web-streams-polyfill";

if (typeof global.ReadableStream === "undefined") {
  global.ReadableStream =
    ReadableStream as unknown as typeof global.ReadableStream;
}