Got 'One of the sources for assign has an enumerable key on the prototype chain' on React native app

Question

I am using react-native for Android app. And use axios as http library. When I try to send a Blob object through http post I will get below error:

HTTP Failure in Axios TypeError: One of the sources for assign has an enumerable key on the prototype chain. Are you trying to assign a prototype property? We don't allow it, as this is an edge case that we do not support. This error is a performance optimization and not spec compliant.

Below is the code I used to add blob object on form data:

let data = new FormData()
  data.append('image', decodeBase64Image(image));

below is the code to decode base64 image. And below code works fine in one of my website application.

export const decodeBase64Image = (dataURI) => {
  let byteString;
  if (dataURI === undefined) {
    return undefined
  }
  if (dataURI.split(',')[0].indexOf('base64') >= 0)
    byteString = atob(dataURI.split(',')[1]);
  else
    byteString = unescape(dataURI.split(',')[1]);

  // separate out the mime component
  let mimeString = ''
  if (dataURI.split(',')[0] != undefined && dataURI.split(',')[0].split(':')[1] != undefined) {
    mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]
  }
  // write the bytes of the string to a typed array
  let ia = new Uint8Array(byteString.length);
  for (let i = 0; i < byteString.length; i++) {
     ia[i] = byteString.charCodeAt(i);
  }
  return new Blob([ia], {type: mimeString});
}

Answer 1

The root of the problem is that the React Native devs made a performance optimization that is not spec-compliant (which is why the code works on your website, but not your React Native app). For more details, see the issue I opened here: https://github.com/facebook/react-native/issues/16814

As a workaround, you can use react-native-fetch-blob. I ran into the same error you did, and react-native-fetch-blob solved it for me.