ReferenceError: Property 'ReadableStream' doesn't exist, in React Native EXPO 51 iOS

[rahuldasgupta]

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

The following code works fine in Expo SDK50 Android, but on Expo SDK50 and SDK51 iOS, I'm getting the [ReferenceError: Property 'ReadableStream' doesn't exist] error.

const uploadImage = async (image, fileName) => {
    const options = {
      keyPrefix: path,
      bucket: bucketName,
      region: "ap-south-1",
      successActionStatus: 201
    };
    let credentials = {
      accessKeyId: "",
      secretAccessKey: "",
    };
    const client = new S3Client({
      region: options.region,
      credentials: credentials
    });
  
    try {
      const file = {
        uri: image,
        name: fileName,
        type: 'image/jpeg',
      };
  
      await client.send(new PutObjectCommand({ Bucket: options.bucket, Key: path, Body: file }));
  
      return true;
    } catch (error) {
      console.error(error);
      return false;
    }
  };

SDK version number

@aws-sdk/client-s3: ^3.556.0, react-native-url-polyfill@^2.0.0, react-native-get-random-values: ^1.11.0

Which JavaScript Runtime is this issue in?

React Native

Details of the browser/Node.js/ReactNative version

v0.74.2

Reproduction Steps

const uploadImage = async (image, fileName) => {
    const options = {
      keyPrefix: path,
      bucket: bucketName,
      region: "ap-south-1",
      successActionStatus: 201
    };
    let credentials = {
      accessKeyId: "",
      secretAccessKey: "",
    };
    const client = new S3Client({
      region: options.region,
      credentials: credentials
    });
  
    try {
      const file = {
        uri: image,
        name: fileName,
        type: 'image/jpeg',
      };
  
      await client.send(new PutObjectCommand({ Bucket: options.bucket, Key: path, Body: file }));
  
      return true;
    } catch (error) {
      console.error(error);
      return false;
    }
  };

Observed Behavior

Error thrown in production & development

Expected Behavior

The image should have been uploaded

Possible Solution

Referred Stackoverflow solution and tried

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

With v4.0.0, I get the error ‘Unable to resolve module web-streams-polyfill/ponyfill’. And with v3.3.3, getting [TypeError: null is not a function] error thrown.

Additional Information/Context

The above block of code works fine in Expo SDK50 Android, but on Expo SDK50 and SDK51 iOS, it throws the mentioned error.

[aBurmeseDev]

Hi @rahuldasgupta - thanks for reaching out.

We've had similar issue reports like this previously and they get resolved after importing the packages like you mentioned. Here's some of them:

• Property 'ReadableStream' doesn't exist (Production environment ONLY) #5649
• Upload blob file in react native ReadableStream doesn't exit #5615
• Property 'ReadableStream' doesn't exist from SESClient #6013

This comment from Stackoverflow post also mentions that using web-streams-polyfill@3.3.3 while 4.0.0 gives unable to resolve error.

It also sounds like this only occurs in iOS and works fine in Android, I'm not familiar with SDK50/SDK51 but that's something I would also double check on.

Let me know if issue persists, I'd be happy to further investigate.
Best,
John

[AbrarAlHasan]

The Same Issue is there when using the

"@aws-sdk/client-cloudwatch-logs": "^3.609.0",
"@aws-sdk/client-cognito-identity-provider": "^3.609.0",
"react-native": "^0.74.3",

import 'react-native-url-polyfill/auto';
import 'react-native-get-random-values';
import 'punycode';
import 'text-encoding-polyfill';
import "@aws-sdk/util-endpoints";

  const client = new AWS.CognitoIdentityProvider({
    region: EnvConfig.REGION,
  });

const {AuthenticationResult} = await client.initiateAuth({
        ClientId: EnvConfig.COGNITO_CLIENT_ID,
        AuthFlow: 'USER_PASSWORD_AUTH',
        AuthParameters: {
          USERNAME: username,
          PASSWORD: password,
        },
      });

This Throwed an Error as [ReferenceError: Property 'ReadableStream' doesn't exist]

After seeing some stackover flow added the below code

Tried with "web-streams-polyfill": "^4.0.0"

import {ReadableStream} from 'web-streams-polyfill'
globalThis.ReadableStream = ReadableStream;

Then got an error as [TypeError: null is not a function]

Tried with "web-streams-polyfill": "^3.3.3"

import ReadableStream from 'web-streams-polyfill/ponyfill';
globalThis.ReadableStream = ReadableStream;

Then got an error as [TypeError: right operand of 'instanceof' is not callable]

[aBurmeseDev]

Can you locate the root cause of the error as far as which file is the error come from? Can you also share list of your dependencies you've installed? I'm not sure if this's SDK related bug but I'd be happy to further look into it.

[AbrarAlHasan]

I thought as it might be some dependancy Issue in my Application. So I Installed a New React Native Project and I tried to Implement aws-sdk for Cognito Login. But I see that the Issue persist in the New React Native application as Well

package.json

    "@aws-sdk/client-cloudwatch-logs": "^3.614.0",
    "@aws-sdk/client-cognito-identity-provider": "^3.614.0",
    "react": "18.2.0",
    "react-native": "0.74.3",
    "react-native-get-random-values": "^1.11.0",
    "react-native-url-polyfill": "^2.0.0",
    "web-streams-polyfill": "^3.3.3"

Also Tried with Altering the aws-sdk versions to older and latest as well but the Same Issue was there when tried with different Versions

if I remove the "web-streams-polyfill" dependancy then I face the below error
[ReferenceError: Property 'ReadableStream' doesn't exist]

The Above web-stream-polyfill version is 3.3.3 if so I get the Below Error
TypeError: right operand of 'instanceof' is not callable

I Tried to use the latest version of "web-streams-polyfill": "^4.0.0"
[TypeError: null is not a function]

My Machine Version

Node - v20.11.1
java - openjdk 17.0.11 2024-04-16 LTS
OS - Mac OS Version-14.0 Sonoma
Chip - Apple M2 Pro

I have attached below the entire recording of the Issue in the below link.
https://drive.google.com/file/d/1nVYkFw7c8LdVowaNCAkNnJZbJFeqaib_/view?usp=sharing

[fak1337]

@AbrarAlHasan

I have tried everything same as you, same outcome.

startet with: [ReferenceError: Property 'ReadableStream' doesn't exist]

and with web-streams-polyfill i get: [TypeError: null is not a function]

this is how i'm using/importing web-streams-polyfill in my index.js:

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

[AbrarAlHasan]

@aBurmeseDev

Upon Checking the Issue. I found out thre might be an Issue in the Streaming Payload file smithy

FILE DIRECTORY
node_modules>@smithy>middleware_retry>dist_cjs>isStreamingPayload

There are two js Files named as isStreamingPayload.browser.js and isStreamingPayload.js

isStreamingPayload.browser.js
"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.isStreamingPayload = void 0; const isStreamingPayload = (request) => (request === null || request === void 0 ? void 0 : request.body) instanceof ReadableStream; exports.isStreamingPayload = isStreamingPayload;

isStreamingPayload.js

"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.isStreamingPayload = void 0; const stream_1 = require("stream"); const isStreamingPayload = (request) => (request === null || request === void 0 ? void 0 : request.body) instanceof stream_1.Readable || (typeof ReadableStream !== "undefined" && (request === null || request === void 0 ? void 0 : request.body) instanceof ReadableStream); debugger console.log("IS STREAMING PAYLOAD",isStreamingPayload) exports.isStreamingPayload = isStreamingPayload;

The Error ** TypeError: right operand of 'instanceof' is not callable at isStreamingPayload** might be from the above files as i was checking in teh debugger.

But not able to solve this issue and proceed further. Please help me out to solve this issue

[fak1337]

any updates on this issue?

[aBurmeseDev]

@AbrarAlHasan - upon reviewing your recording, I noticed that while you're on "web-streams-polyfill": "^3.3.3", you're importing ReadableStream from web-streams-polyfill where it should be web-streams-polyfill/ponyfill based on the package.

Can you give it a shot?