TypeError: response.blob is not a function

[bneigher]

Describe the bug Seems that on the newest release (3.0.4) of amplify-js, http requests are erroring out on react-native with network inspect on (react-native-debugger)

To Reproduce Steps to reproduce the behavior:

Install 3.0.4. Open react-native-debugger, toggle network inspect ON

Observe error in console

[sammartinez]

@bneigher Can you provide your environment information? Please run the following command:

npx envinfo --system --binaries --browsers --npmPackages --npmGlobalPackages

Thanks ahead of time

[bneigher]

I changed it back to 2.3.0 because I need to continue software development, but here is everything else:

  System:
    OS: macOS 10.15.3
    CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
    Memory: 1.81 GB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 13.8.0 - ~/.nvm/versions/node/v13.8.0/bin/node
    npm: 6.13.6 - ~/.nvm/versions/node/v13.8.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Browsers:
    Chrome: 80.0.3987.149
    Firefox: 70.0.1
    Firefox Developer Edition: 71.0
    Safari: 13.0.5
  npmPackages:
    @aws-amplify/cli: ^4.17.2 => 4.17.2
    @babel/core: ^7.6.2 => 7.8.4
    @babel/plugin-transform-modules-commonjs: ^7.6.0 => 7.8.3
    @babel/polyfill: ^7.8.3 => 7.8.3
    @babel/runtime: ^7.6.2 => 7.8.4
    @gouch/to-title-case: ^2.2.1 => 2.2.1
    @react-native-community/async-storage: ^1.8.1 => 1.8.1
    @react-native-community/blur: ^3.4.1 => 3.4.1
    @react-native-community/cameraroll: ^1.4.1 => 1.4.1
    @react-native-community/datetimepicker: ^2.3.0 => 2.3.0
    @react-native-community/eslint-config: 0.0.5 => 0.0.5
    @react-native-community/netinfo: ^5.6.2 => 5.6.2
    @react-native-community/slider: ^2.0.8 => 2.0.8
    @sentry/react-native: ^1.3.6 => 1.3.6
    aws-amplify: ^2.3.0 => 2.3.0
    axios: ^0.19.2 => 0.19.2
    babel-eslint: ^10.0.2 => 10.0.3
    babel-jest: 24.9.0 => 24.9.0
    babel-plugin-dynamic-import-node: ^2.3.0 => 2.3.0
    babel-plugin-styled-components: ^1.9.4 => 1.10.7
    babel-plugin-transform-remove-console: ^6.9.4 => 6.9.4
    buffer: ^5.4.3 => 5.4.3
    eslint: ^6.5.1 => 6.8.0
    eslint-config-prettier: ^6.1.0 => 6.10.0
    eslint-plugin-prettier: ^3.1.0 => 3.1.2
    flat: ^4.1.0 => 4.1.0
    fuse.js: ^3.4.6 => 3.4.6
    google-libphonenumber: ^3.2.2 => 3.2.6
    husky: ^1.3.1 => 1.3.1
    jest: ^24.9.0 => 24.9.0
    jest-haste-map: ^24.8.1 => 24.9.0
    jscrambler-metro-plugin: ^5.4.3 => 5.4.3
    jwt-decode: ^2.2.0 => 2.2.0
    lodash.debounce: ^4.0.8 => 4.0.8
    lodash.merge: ^4.6.2 => 4.6.2
    masked: ^1.2.1 => 1.2.1
    metro-react-native-babel-preset: ^0.58.0 => 0.58.0
    moment: ^2.24.0 => 2.24.0
    prettier: ^1.18.2 => 1.19.1
    prop-types: ^15.7.2 => 15.7.2
    react: ^16.11.0 => 16.12.0
    react-native: ^0.62.0 => 0.62.0
    react-native-auth0: git+https://git@github.com/auth0/react-native-auth0.git => 2.3.0
    react-native-background-fetch: ^3.0.4 => 3.0.4
    react-native-calendars: git+https://github.com/dieta-app/react-native-calendars.git => 1.22.0
    react-native-camera: ^3.21.0 => 3.21.0
    react-native-collapsible: ^1.5.2 => 1.5.2
    react-native-config: ^0.12.0 => 0.12.0
    react-native-dark-mode: ^0.2.2 => 0.2.2
    react-native-date-picker: ^2.7.0 => 2.7.6
    react-native-device-info: ^5.5.3 => 5.5.3
    react-native-easy-grid: ^0.2.0 => 0.2.2
    react-native-elements: ^1.2.7 => 1.2.7
    react-native-exception-handler: ^2.10.8 => 2.10.8
    react-native-gesture-handler: ^1.5.2 => 1.6.0
    react-native-haptic-feedback: ^1.9.0 => 1.9.0
    react-native-image-crop-picker: ^0.28.0 => 0.28.0
    react-native-image-resizer: ^1.2.1 => 1.2.1
    react-native-image-slider: ^2.0.3 => 2.0.3
    react-native-iphone-x-helper: ^1.2.1 => 1.2.1
    react-native-json-tree: ^1.2.0 => 1.2.0
    react-native-keyboard-aware-scroll-view: ^0.9.1 => 0.9.1
    react-native-linear-gradient: ^2.5.6 => 2.5.6
    react-native-localize: ^1.3.3 => 1.3.3
    react-native-navigation: ^6.4.0 => 6.4.0
    react-native-offline: ^5.4.0 => 5.4.0
    react-native-picker-select: ^6.3.0 => 6.5.0
    react-native-push-notification: ^3.1.9 => 3.1.9
    react-native-reanimated: ^1.7.1 => 1.7.1
    react-native-responsive-screen: ^1.2.2 => 1.4.0
    react-native-restart: 0.0.13 => 0.0.13
    react-native-svg: ^12.0.3 => 12.0.3
    react-native-swipe-list-view: ^2.5.0 => 2.5.0
    react-native-touchable-scale: ^2.1.1 => 2.1.1
    react-native-ui-lib: ^5.5.0 => 5.5.0
    react-native-uuid: ^1.4.9 => 1.4.9
    react-native-vector-icons: ^6.6.0 => 6.6.0
    react-native-walkthrough-tooltip: ^0.6.1 => 0.6.1
    react-native-webview: ^9.0.2 => 9.0.2
    react-native-youtube-sdk: ^1.0.6 => 1.0.6
    react-redux: ^7.2.0 => 7.2.0
    react-test-renderer: ^16.11.0 => 16.12.0
    redux: ^4.0.5 => 4.0.5
    redux-devtools-extension: ^2.13.8 => 2.13.8
    redux-enhancer-react-native-appstate: ^0.3.1 => 0.3.1
    redux-logger: ^3.0.6 => 3.0.6
    redux-persist: ^6.0.0 => 6.0.0
    redux-persist-filesystem-storage: ^2.1.0 => 2.1.0
    redux-thunk: ^2.3.0 => 2.3.0
    rn-content-loader: 0.0.2 => 0.0.2
    rn-fetch-blob: ^0.12.0 => 0.12.0
    semver-utils: ^1.1.4 => 1.1.4
    styled-components: ^5.0.1 => 5.0.1
    tinycolor2: ^1.4.1 => 1.4.1
    underscore: ^1.9.1 => 1.9.2
  npmGlobalPackages:
    npm-check-updates: 4.0.4
    npm: 6.13.6

[ericclemmons]

@bneigher Which network requests are affected? @Amplifiyer is researching #5273, which may be related.

[bneigher]

I'm pretty sure it's all amplify requests, not just Storage

[Amplifiyer]

I'm able to reproduce this with react native debugger, but not with chrome debugger. My guess is that because of the proxy created by the react native debugger, the response object is getting changed.

[bneigher]

@Amplifiyer any updates? I don't think any react native developer who uses react-native-debugger will be able to rest with the modular amplify until this is resolved.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[albanx]

I get also this error when running test on PhantomJS. Basically after including polyfill after polyfills to fix other errors caused by the library I got response.blob() is not a function.

What are the browser list amplyfy supports?

[sammartinez]

@bneigher Do you have a code snippet we can look at to see if we can reproduce this? To @ericclemmons callout, we did have some issues with uploads which have been resolved on later versions. Just wanted to validate with a code snippet if possible. Thanks ahead of time

[stale[bot]]

This issue has been automatically closed because of inactivity. Please open a new issue if are still encountering problems.

[idanlo]

I have the same problem, #6907

[Jovan1998]

In my case the problem seemed to be connected to the Network Inspection of the React Native Debugger. Disabling it also stopped the Problem. Try it out by right-clicking the upper left quarter of the React Native Debugger and then click "Disable Network Inspections".

[bneigher]

@sammartinez @Amplifiyer just want to remind you that this is still a problem. You asked for a code snippet, but I'm saying that anything on react-native with react native debugger and Network Inspect turned on will show this.

React Native Debugger is one of the most popular react native developer tools, and this is really causing me a headache as it appears to be causing other people issues too.

[chrisbonifacio]

Has anyone tried calling response.blob with a separate http request that's not handled by Amplify? This happens to me when I try to create a Blob from an image file myself, no Amplify library involved. This doesn't work while I have RNDebugger inspecting the network, but disabled it works just fine.

const photo = await fetch(item.uri);
const photoBlob = await photo.blob();

[rdsedmundo]

I'm facing the same issue. React Native Debugger with Network inspect, and calling await Auth.currentUserCredentials returns (literally return, not throw) a TypeError instance response.blob is not defined.

[bneigher]

yea still affecting me

[rdsedmundo]

@chrisbonifacio I tested this:

Has anyone tried calling response.blob with a separate http request that's not handled by Amplify?

And got the same result as you, it also doesn't work, so I don't think this is related to Amplify but with the React Native Debugger functionality of hijacking the Blob instead.

@jhen0409 by any chance could you chime in here and give us a light? In the way that it's today we're not able to leverage the network inspection for a lot of AWS packages (it's not just Amplify).

I know that this document explains some limitations of the feature and also talks a bit about the Blob, but this comment language is a bit confusing:

  /*
   * Set __FETCH_SUPPORT__ to false is just work for `fetch`.
   * If you're using another way you can just use the native Blob and remove the `else` statement
   */
  global.Blob = global.originalBlob ? global.originalBlob : global.Blob;

Also saw this line https://github.com/jhen0409/react-native-debugger/blob/639c02c0f3385c83e62b0ca483cb989db0e4b1a4/app/worker/polyfills/fetch.js#L12 that sets support.blob to false and apparently there's no way to override it.

[bneigher]

yes - while this technically is a problem with react native debugger, it seems that most libraries that make http requests handle this correctly. if there is some strange jazz going on in amplify though - I would claim that the patch should be done in this library as opposed to waiting for react native debugger to patch it.

[chrisbonifacio]

@bneigher I can appreciate that this is an inconvenience while testing. However, if we were to somehow fix this in our library, one would still run into the same issue any time they attempt to generate a blob anywhere else in their app. It seems that the common practice to get around this is to either replace fetch or Blob globally with some polyfill and/or use a proxy. We leave this up to the customer on the path they want to choose to implement this fix.

The resources @rdsedmundo mentioned above might help to find a workaround until RNDebugger addresses this issue.

[github-actions[bot]]

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.