React-native - "TypeError: Undefined is not a function"

[harshit-infogen]

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

[aBurmeseDev]

Hi @harshit-infogen - thanks for reaching out.

We have this aws-sdk-js-tests repo with minimal reproduction for issues like this and I wasn't able to reproduce this error by running in that repo. Feel free to quickly spin up to help narrow down the root cause.
A few things I'd like to check:

• what are your dependencies installed?
• any changes made since last working code?
• can you upgrade SDK version or do a fresh install?

[harshit-infogen]

Hey @aBurmeseDev , thank your for looking into it. Here are my findings on your questions -

1. These are the dependencies installed -

"dependencies": {
    "@aws-sdk/client-s3": "^3.633.0",
    "@daily-co/react-native-daily-js": "^0.40.0",
    "@daily-co/react-native-webrtc": "^1.94.1-daily.5",
    "@expo/react-native-action-sheet": "^4.0.1",
    "@georstat/react-native-image-gallery": "^1.1.0",
    "@gorhom/bottom-sheet": "^4.4.5",
    "@hookform/resolvers": "^2.9.0",
    "@invertase/react-native-apple-authentication": "^2.2.2",
    "@react-native-async-storage/async-storage": "^1.17.11",
    "@react-native-camera-roll/camera-roll": "^5.0.4",
    "@react-native-clipboard/clipboard": "^1.15.0",
    "@react-native-community/netinfo": "^9.0.0",
    "@react-native-firebase/analytics": "^17.1.0",
    "@react-native-firebase/app": "^17.1.0",
    "@react-native-firebase/auth": "^17.1.0",
    "@react-native-google-signin/google-signin": "^9.0.2",
    "@react-native-masked-view/masked-view": "^0.2.7",
    "@react-native-picker/picker": "^2.4.8",
    "@react-navigation/bottom-tabs": "^6.3.1",
    "@react-navigation/core": "^6.2.1",
    "@react-navigation/elements": "^1.3.17",
    "@react-navigation/native": "^6.0.8",
    "@react-navigation/routers": "^6.1.0",
    "@react-navigation/stack": "^6.2.0",
    "@stream-io/flat-list-mvcp": "^0.10.2",
    "@stripe/stripe-react-native": "^0.27.2",
    "@tanstack/react-query": "^4.14.1",
    "@truefit/http-utils": "^2.0.4",
    "axios": "^0.21.1",
    "color": "^4.2.3",
    "date-fns": "^2.29.3",
    "lodash": "^4.17.21",
    "react": "18.2.0",
    "react-hook-form": "^7.33.1",
    "react-native": "^0.71.1",
    "react-native-background-timer": "^2.4.1",
    "react-native-bootsplash": "^5.5.3",
    "react-native-calendars": "^1.1293.0",
    "react-native-collapsible": "https://github.com/oblador/react-native-collapsible",
    "react-native-date-picker": "^4.2.9",
    "react-native-document-picker": "^8.2.0",
    "react-native-elements": "^3.4.2",
    "react-native-fast-image": "^8.6.3",
    "react-native-fbsdk-next": "^11.1.0",
    "react-native-fs": "^2.20.0",
    "react-native-gesture-handler": "^2.9.0",
    "react-native-get-random-values": "^1.8.0",
    "react-native-gifted-chat": "^2.0.0",
    "react-native-haptic-feedback": "^1.14.0",
    "react-native-hyperlink": "^0.0.22",
    "react-native-image-crop-picker": "^0.41.2",
    "react-native-image-picker": "^5.3.1",
    "react-native-image-resizer": "^1.4.5",
    "react-native-keyboard-aware-scroll-view": "^0.9.5",
    "react-native-keyboard-controller": "^1.16.6",
    "react-native-keychain": "^8.1.1",
    "react-native-permissions": "^3.8.0",
    "react-native-picker-select": "^8.0.4",
    "react-native-reanimated": "^2.14.1",
    "react-native-safe-area-context": "^4.4.1",
    "react-native-screens": "^3.19.0",
    "react-native-share": "^7.9.1",
    "react-native-svg": "^13.7.0",
    "react-native-toast-message": "^2.1.5",
    "react-native-vector-icons": "^9.2.0",
    "react-native-video": "^5.2.1",
    "remeda": "^1.2.0",
    "reselect": "^4.1.6",
    "uuid": "^10.0.0",
    "yup": "^0.32.11"
  },

2. As mentioned in my thread, initially I was facing this issue - React Native - Syntax Error: Static class blocks are not enabled #6828. In order to fix this I have added ['@babel/plugin-transform-class-static-block'] in babel.config.js which resolved the issue. Afterwards, No code changes have been done.

3. Forgot to mention, I have already tried upgrading/downgrading the SDK version with fresh install many times. However, if there's any specific version you want me to use. Could you please mention it?

Let me know if you need more information from my side!

[aBurmeseDev]

Appreciate the additional info! I have come across this error a few times myself with RN and most of the times the root cause happens to be where I'm attempting to call a value as a function but value is undefined.

Can you try this?

  try {
    const command = new PutObjectCommand(params);
    const response = await s3Client.send(command);
    console.log('S3 upload response:', response);  // Add this log

    // Only create location if upload was successful
    if (response && response.$metadata?.httpStatusCode === 200) {
      const location = `https://${S3_BUCKET}.s3.${REGION}.amazonaws.com/${uniqueKey}`;
      return location;
    } else {
      console.warn('Upload response not as expected:', response);
      return null;
    }
  }

[harshit-infogen]

@aBurmeseDev I tried to implement the above code, but I am still getting the same error.

  try {
    const command = new PutObjectCommand(params);
    console.warn('S3 command:', command);
    const response = await s3Client.send(command);
    console.warn('S3 upload response:', response); // Add this log

    // Only create location if upload was successful
    if (response && response.$metadata?.httpStatusCode === 200) {
      const location = `https://${S3_BUCKET}.s3.${REGION}.amazonaws.com/${uniqueKey}`;
      return location;
    } else {
      console.warn('Upload response not as expected:', response);
      return null;
    }
  } catch (error) {
    console.warn(error);
    return null;
  }

I received the S3 command response, but not the S3 upload response. In the end, it goes to the catch statement and returns the same error: “TypeError: Undefined is not a function”.

Here is the S3 command response -

'S3 command:', { middlewareStack: 
   { add: [Function: add],
     addRelativeTo: [Function: addRelativeTo],
     clone: [Function: clone],
     use: [Function: use],
     remove: [Function: remove],
     removeByTag: [Function: removeByTag],
     concat: [Function: concat],
     applyToStack: [Function: cloneTo],
     identify: [Function: identify],
     identifyOnResolve: [Function: identifyOnResolve],
     resolve: [Function: resolve] },
  serialize: [Function: se_PutObjectCommand],
  deserialize: [Function: de_PutObjectCommand],
  input: 
   { Bucket: 'bucket',
     Key: 'key',
     Body: 
      { _data: 
         { size: 6731309,
           offset: 0,
           blobId: 'D9875B9C-5084-44D6-98E7-2EE3A546B91F',
           type: 'image/jpeg',
           name: 'name.jpg',
           __collector: {} } },
     ContentType: 'image/jpeg' } }

[harshit-infogen]

Hi @aBurmeseDev, any update on the issue?

[aBurmeseDev]

Hi @harshit-infogen - I haven't been able to reproduce this on my end using our test-repo which includes minimal reproduction for all environments including React Native. Could you quickly spin up the test repo and maybe run your code in there?