Closed rahuldasgupta closed 1 month ago
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:
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
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]
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.
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
@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;
}
@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
any updates on this issue?
@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?
@aBurmeseDev
I checked by Importing the web-streams-polyfill
as mentioned. But still im facing the issue as null is not a function.
I have attached below the recordings for the same. https://drive.google.com/file/d/1Hf0LdroeG1xeXXrWgzBLVhkgrPD4gElm/view?usp=sharing
Have the same issue that other have mentioned in this thread. I've also tried both polyfill
and polyfill/ponyfill
and both 3.3.3
and 4.0.0
versions and still met with the error [TypeError: null is not a function]
Hey all - I spent some time trying to replicate the issue creating a new React Native using Expo. Note that this's React Native fresh install on this machine that i'm testing on.
npx create-expo-app@latest
@aws-sdk/client-s3 @smithy/fetch-http-handler @aws-sdk/client-cognito-identity-provider
react-native-url-polyfill react-native-get-random-values web-streams-polyfill
npm run web into http://localhost:8081
export default function s3Client() {
const config: S3ClientConfig = {
region: "us-west-1",
credentials: {
accessKeyId: "accessKeyId",
secretAccessKey: "secretAccessKey",
},
};
return new S3Client(config);
}
const putObjectBucket = async () => { try { const client = s3Client(); const command = new PutObjectCommand({ Bucket: "m1vmtest", Body: "metro.config.js", Key: "metro.config.js", }); const response = await client.send(command); console.log(response); } catch (error) { console.error("Error listing buckets: ", error); } };
const listObjectsInBucket = async () => {
try {
const client = s3Client();
console.log("S3 client initiated");
const command = new ListObjectsCommand({
Bucket: "m1vmtest",
});
console.log("command initiated");
const response = await client.send(command);
console.log(response);
} catch (error) {
console.error(Error listing objects in bucket:
, error);
}
};
listObjectsInBucket(); putObjectBucket();
- here are all the dependencies installed
```json
"dependencies": {
"@aws-sdk/client-s3": "^3.614.0",
"@aws-sdk/fetch-http-handler": "^3.374.0",
"@aws-sdk/smithy-client": "^3.374.0",
"@expo/vector-icons": "^14.0.2",
"@react-navigation/native": "^6.0.2",
"@smithy/fetch-http-handler": "^3.2.2",
"@smithy/types": "^3.3.0",
"expo": "~51.0.21",
"expo-constants": "~16.0.2",
"expo-font": "~12.0.9",
"expo-linking": "~6.3.1",
"expo-router": "~3.5.18",
"expo-splash-screen": "~0.27.5",
"expo-status-bar": "~1.12.1",
"expo-system-ui": "~3.0.7",
"expo-web-browser": "~13.0.3",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-native": "0.74.3",
"react-native-gesture-handler": "~2.16.1",
"react-native-get-random-values": "^1.11.0",
"react-native-polyfill-globals": "^3.1.0",
"react-native-reanimated": "~3.10.1",
"react-native-safe-area-context": "4.10.1",
"react-native-screens": "3.31.1",
"react-native-svg-transformer": "^1.5.0",
"react-native-url-polyfill": "^2.0.0",
"react-native-web": "~0.19.10",
"stream-browserify": "^3.0.0",
"util": "^0.12.5",
"uuid": "^10.0.0",
"uuidv4": "^6.2.13",
"web-streams-polyfill": "^4.0.0"
},
TypeError
isn't even relevant to stream.
Reference: The JavaScript exception "is not a function" occurs when there was an attempt to call a value from a function, but the value is not actually a function.Please let me know if I missed anything in my repro attempt.
@aBurmeseDev
I checked the same scenario mentioned in the comment
It works fine in the web platform. But on checking in the IOS device Simulator or Real Device, the Issue is still Present.
I checked it with the @aws-sdk/client-cognito-identity-provider.
Can you please try to give a shot on IOS or Android Device in the Expo
@AbrarAlHasan Try downgrading to version 3.574.0
of all the aws v3 utilities you are using. For example, for s3-client
, you would need to execute the command:
npm i @aws-sdk/client-s3@3.574.0
Let me know if it solves the issue.
Received TypeError: null is not a function
when using AWS SDK 3.609.0
for DynamoDB.
Downgrading to version 3.574.0
as above comment made the error gone.
The file's header still with all the polyfills
import 'react-native-get-random-values';
import 'react-native-url-polyfill/auto';
import { ReadableStream } from 'web-streams-polyfill/ponyfill';
globalThis.ReadableStream = ReadableStream;
import { DynamoDBClient } from '@aws-sdk/client-dynamodb';
@aBurmeseDev Thanks for looking into the issue. And to answer your question, yes, you missed a crucial repro step. Could you please try to repro the issue on a mobile device or an emulator/simulator instead of web as I initially mentioned in my created issue? I have repro your comment and the issue persists on a mobile device not on web!
The last stable version free from this issue was 3.574.0
.
+1 no longer getting the issue after downgrading to 3.574.0
Quick update: I was able to reproduce the reported behavior in iOS simulator with Expo and can confirm last compatible SDK version is 3.574.0
. Please use the version while we further look into it.
Can someone please confirm if this also errors out in Android simulator as well?
@aBurmeseDev The issue is present in Android as well.
@AbrarAlHasan Try downgrading to version
3.574.0
of all the aws v3 utilities you are using. For example, fors3-client
, you would need to execute the command:
npm i @aws-sdk/client-s3@3.574.0
Let me know if it solves the issue.
Love you.
I'm able to reproduce error Property 'ReadableStream' doesn't exist
with @aws-sdk/client-s3@3.616.0
and react-native@0.74.3
in the minimal repro from https://github.com/aws-samples/aws-sdk-js-tests on iOS/Android
Patch for testing: client-s3-putobject-patch.txt
If you populate globalThis.ReadableStream from web-streams-polyfill@4.0.0
as mentioned on StackOverflow, the error TypeError: null is not a function
is thrown.
Patch for testing: web-streams-polyfill-4.0.0-patch.txt
With prior commits in aws-samples/aws-sdk-js-tests
, I verified that:
Property 'ReadableStream' doesn't exist
is thrown.Property 'ReadableStream' doesn't exist
is thrown.Property 'ReadableStream' doesn't exist
is thrown.Testing with react-native@0.74.x, and verified that with web-streams-polyfill
workaround:
@aws-sdk/client-s3@3.574.0
does not throw error, and the putObject operation is successful@aws-sdk/client-s3@3.575.0
throws error TypeError: null is not a function
There are two things which are required to be done:
v3.575.0
because of which web-streams-polyfill
stopped working.web-streams-polyfill
need to be documented as official requirement for ReactNative runtime.On doing some deep dive, I found out that lack of ReadableStream in react-native is specific to Hermes Engine which is default engine as of 0.70 https://reactnative.dev/docs/hermes#enabling-hermes-on-older-versions-of-react-native
At the time of comment, there are no plans to implement ReadableStream in Hermes as mentioned in https://github.com/facebook/hermes/discussions/1072#discussioncomment-8428209
Another workaround is to disable Hermes in your react-native configurations as described in https://reactnative.dev/docs/hermes#switching-back-to-javascriptcore
android/gradle.properties
file and flip hermesEnabled
back to false.ios/Podfile
file and set :hermes_enabled
to false.At the time of comment, there are no plans to implement ReadableStream in Hermes as mentioned in facebook/hermes#1072 (comment)
I posted a PR with official recommendation to polyfill ReadableStream in react-native https://github.com/aws/aws-sdk-js-v3/pull/6302
Error stack of TypeError: null is not a function
ERROR {
"$metadata": {
"attempts": 1,
"totalRetryDelay": 0
},
"message": "null is not a function",
"stack": "TypeError: null is not a function\n at anonymous (/Users/distiller/react-native/sdks/hermes/build_iphonesimulator/lib/InternalBytecode/InternalBytecode.js:418:28)\n at tryCallOne (/Users/distiller/react-native/sdks/hermes/build_iphonesimulator/lib/InternalBytecode/InternalBytecode.js:53:16)\n at anonymous (/Users/distiller/react-native/sdks/hermes/build_iphonesimulator/lib/InternalBytecode/InternalBytecode.js:139:27)\n at apply (native)\n at anonymous (http://localhost:8081/index.bundle//&platform=ios&dev=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.reactnative:44439:26)\n at _callTimer (http://localhost:8081/index.bundle//&platform=ios&dev=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.reactnative:44318:17)\n at _callReactNativeMicrotasksPass (http://localhost:8081/index.bundle//&platform=ios&dev=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.reactnative:44363:17)\n at callReactNativeMicrotasks (http://localhost:8081/index.bundle//&platform=ios&dev=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.reactnative:44569:44)\n at __callReactNativeMicrotasks (http://localhost:8081/index.bundle//&platform=ios&dev=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.reactnative:2239:48)\n at anonymous (http://localhost:8081/index.bundle//&platform=ios&dev=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.reactnative:2012:45)\n at __guard (http://localhost:8081/index.bundle//&platform=ios&dev=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.reactnative:2211:15)\n at flushedQueue (http://localhost:8081/index.bundle//&platform=ios&dev=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.reactnative:2011:21)\n at callFunctionReturnFlushedQueue (http://localhost:8081/index.bundle//&platform=ios&dev=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.reactnative:1996:33)"
}
There's no direct reference to some code in the SDK in the stack trace, although it's confirmed in >=3.575.0.
It originates from build_iphonesimulator/lib/InternalBytecode/InternalBytecode.js
Source code of the bundle which throws error
at callReactNativeMicrotasks (2239:48) at anonymous (2012:15) at guard (2011:21) at callFunctionReturnFlushedQueue (1996:33)
/**
* Public APIs
*/
return _createClass(MessageQueue, [{
key: "callFunctionReturnFlushedQueue",
value: function callFunctionReturnFlushedQueue(module, method, args) {
var _this = this;
this.__guard(function () {
_this.__callFunction(module, method, args);
});
return this.flushedQueue(); // <-- Line 1996
}
}, {
key: "invokeCallbackAndReturnFlushedQueue",
value: function invokeCallbackAndReturnFlushedQueue(cbID, args) {
var _this2 = this;
this.__guard(function () {
_this2.__invokeCallback(cbID, args);
});
return this.flushedQueue();
}
}), {
key: "flushedQueue",
value: function flushedQueue() {
var _this3 = this;
this.__guard(function () { // <-- Line 2011
_this3.__callReactNativeMicrotasks(); // <-- Line 2012
});
var queue = this._queue;
this._queue = [[], [], [], this._callID];
return queue[0].length ? queue : null;
}
}, {
Bundle attached for future reference: index.bundle.js.txt
Bundles created by React Native for comparison
HTML diff: react-native-bundle-diff.html.txt
@trivikr Thanks for looking into the issue. Unfortunately, I have started seeing the issue in v3.574
as well. I followed your recommendation to disable hermes and it has only updated the error message to TypeError: f is not a function. (In 'f()', 'f' is null)
.
I am using v3.574
.
Unfortunately, I have started seeing the issue in
v3.574
as well. I followed your recommendation to disable hermes.
Thank you Farzad, for your initial findings about v3.574.0
and following up.
Let's keep Hermes enabled, since it's the default engine since react-native@0.70.x, and react-native maintainers are developing it further. It was one of the alternatives I'd come across when doing deep dive. If building a react-native app without Hermes is a requirement for you, please create a new bug report, and we can discuss the fixes there.
It's pretty safe to conclude that this issue is not reproducible in v3.574.0
in default setup of react-native after adding required polyfills.
I'll focus all further investigations in this issue on why react-native is throwing TypeError: null is not a function
with JS SDK >=v3.575.0
I verified that TypeError: null is not a function
error is thrown by fix in https://github.com/smithy-lang/smithy-typescript/pull/1332
It was verified by editing artifact node_modules/@smithy/fetch-http-handler/dist-cjs/index.js
to remove the changes in fetch-http-handler, and reloading the iOS application.
Error TypeError: null is not a function
is thrown
The ListTables call is successful
The TypeError: null is not a function
is thrown since removeSignalEventListener
is surprisingly not set in react-native environment. One of the fix is checking for type of removeSignalEventListener before calling it in https://github.com/smithy-lang/smithy-typescript/blob/a7843adf6f3905df5f2e003e82889008c950b6eb/packages/fetch-http-handler/src/fetch-http-handler.ts#L188
return Promise.race(raceOfPromises).finally(() => {
if (typeof removeSignalEventListener === "function") {
removeSignalEventListener();
}
});
The issue happens because removeSignalEventListener
is set only if abortSignal is defined and abortSignal.addEventListener https://github.com/smithy-lang/smithy-typescript/blob/a7843adf6f3905df5f2e003e82889008c950b6eb/packages/fetch-http-handler/src/fetch-http-handler.ts#L168-L180
But it's called in the finally block of race of promises all the time https://github.com/smithy-lang/smithy-typescript/blob/a7843adf6f3905df5f2e003e82889008c950b6eb/packages/fetch-http-handler/src/fetch-http-handler.ts#L188
It's not reproducible in web environments probably because they don't call null function in finally block, but react-native does. After fixing the bug in JS SDK v3, we should likely cut a feature request on react-native project to handle this use case.
After fixing the bug in JS SDK v3, we should likely cut a feature request on react-native project to handle this use case.
I attempted to write a minimal repro to share with react-native maintainers, but it's returning warning instead of error at the time of comment https://github.com/trivikr/react-native-type-error-null-is-not-a-function
I'll discuss internally with AWS SDK for JavaScript team if a minimal repro which returns a error can be written.
Feel free to play around the repro repo, and post pull request, if you're able to create one with TypeError: null is not a function
error.
We tested an alternative fix to initialize removeSignalEventListener
as empty function as follows
let removeSignalEventListener = () => {};
I edited node_modules/@smithy/fetch-http-handler/dist-cjs/index.js
with the fix, and verified that the ListTables call is successful.
Updated fix was posted in https://github.com/smithy-lang/smithy-typescript/pull/1351
The fix is merged in https://github.com/smithy-lang/smithy-typescript/pull/1351
We plan to publish it in @smithy/fetch-http-handler@3.2.4
around 4 PM Pacific today.
Once published, the fix will be immediately available on JS SDK >=v3.575.0. You've to follow just two steps in your application:
@smithy/fetch-http-handler
version to 3.2.4
The report is created with react-native upstream in https://github.com/facebook/react-native/issues/45745
We plan to publish it in
@smithy/fetch-http-handler@3.2.4
around 4 PM Pacific today.
The @smithy/fetch-http-handler@3.2.4 version is published.
I verified that the issue is no longer reproducible with JS SDK >=v3.575.0 with sample code in https://github.com/aws-samples/aws-sdk-js-tests repo.
i am getting this error, when i try to implement chunk upload in react native TypeError: readableStream.tee is not a function (it is undefined)
TypeError: readableStream.tee is not a function
Please create a new bug report with a minimal repro.
TypeError: readableStream.tee is not a function (it is undefined)
TypeError: readableStream.tee is not a function (it is undefined)
6324
Also getting the same issue with the latest version: 3.620.1
For those who still struggling with this "ReadableStream" Here's how I fix it:
import 'react-native-get-random-values';
import 'react-native-url-polyfill/auto';
import { ReadableStream } from 'web-streams-polyfill/ponyfill';
globalThis.ReadableStream = ReadableStream;
My env:
"react-native": "0.70.6",
"aws-amplify": "^6.0.25",
"@aws-amplify/react-native": "^1.0.26",
"@aws-sdk/client-location": "^3.616.0",
For those who still struggling with this "ReadableStream"
The original issue reported in this issue can just be fixed by adding web-streams-polyfill
in react-native environments.
Applications were already adding the polyfill, and we documented in https://github.com/aws/aws-sdk-js-v3/pull/6302
The TypeError: null is not a function
is a bug in react-native environment as it does not follow official TC39 specification when null is passed to Promise.prototype.finally()
. We reported it upstream in https://github.com/facebook/react-native/issues/45745, and added a fix in SDK code by ensuring variable passed to finally is a callable empty function. The fix is available in all SDK versions. If you use a lockfile, please update it.
The error TypeError: readableStream.tee is not a function
is not reproducible at the time of comment.
Please refer to report https://github.com/aws/aws-sdk-js-v3/issues/6324 for details.
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.
Checkboxes for prior research
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.
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
Observed Behavior
Error thrown in production & development
Expected Behavior
The image should have been uploaded
Possible Solution
Referred Stackoverflow solution and tried
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.