React-native - "TypeError: Undefined is not a function" #6933
Description
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
Recently, we encountered an error in our React-native application while attempting to upload a file to our S3 bucket using the .send() function. The error message displayed was “TypeError: Undefined is not a function.”
Regression Issue
- Select this option if this issue appears to be a regression.
SDK version number
"@aws-sdk/client-s3": "^3.633.0"
Which JavaScript Runtime is this issue in?
React Native
Details of the browser/Node.js/ReactNative version
"react-native": "^0.71.1", "react": "18.2.0", node - v18.20.2
Reproduction Steps
We are directly uploading the file to the S3 bucket from the client side in our React Native application. Additionally, we are utilizing the “react-native-document-picker” library to enable users to select files from their device. Below is our React Native code:
Imports:
import {PutObjectCommand, S3Client} from '@aws-sdk/client-s3';
import DocumentPicker from 'react-native-document-picker';
import {v4 as uuidv4} from 'uuid';
Function:
const uploadToS3 = async (file: FormFile) => {
const {name, uri, type} = file;
const uniqueKey = `${Date.now()}-${uuidv4()}-${name}`;
const response = await fetch(uri);
const blob: Blob = await response.blob();
const params = {
Bucket: S3_BUCKET,
Key: uniqueKey,
Body: blob,
ContentType: type,
};
try {
const command = new PutObjectCommand(params);
await s3Client.send(command);
const location = `https://${S3_BUCKET}.s3.${REGION}.amazonaws.com/${uniqueKey}`;
return location;
} catch (error) {
console.warn(error) ---> Throwing error - "TypeError: Undefined is not a function"
return null;
}
};
Observed Behavior
Brief History
We implemented this code seven months ago. However, we have recently encountered an issue (since two to three weeks ago).
Initially, the issue was with the “smithy-client” component (attached screenshot).
To address the build issue, I incorporated the Babel plugin @babel/plugin-transform-class-static-block into my Babel configuration. This modification successfully resolved the build issue. However, upon attempting to upload the modified file, I encountered an error message indicating that “undefined is not a function.”
Expected Behavior
The send() function should function as intended, and the file should be successfully uploaded to the S3 bucket from our React Native application.
Possible Solution
No response
Additional Information/Context
No response