"Error: unsupported BodyInit type" returned for ALL fetch() requests

[EvHaus]

• I have reviewed the documentation
• I have searched existing issues
• I am using the latest React Native version

Environment

Environment:
OS: Windows 10
Node: 9.9.0
Yarn: 1.5.1
npm: 5.6.0
Watchman: Not Found
Xcode: N/A
Android Studio: Version 3.1.0.0 AI-173.4670197

Packages: (wanted => installed)
react: 16.3.1 => 16.3.1
react-native: 0.55.2 => 0.55.2

Steps to Reproduce

// Fails with "Error: unsupported BodyInit type"
fetch('https://api.fakesite.com/');

// Also fails with "Error: unsupported BodyInit type"
fetch('https://api.fakesite.com/', {
	method: 'GET',
});

// Also fails with "Error: unsupported BodyInit type"
fetch('https://api.fakesite.com/', {
	headers: {
		Accept: 'application/json',
		'Content-Type': 'application/json',
	},
	method: 'GET',
})

However if I yarn add axios and then try:

import axios from 'axios';

// It works!
axios('https://api.fakesite.com/');

Additionally, running the exact same fetch commands as posted above in a Chrome web browser on my Windows PC (the same one running the Metro Bundler) works fine.

Expected Behavior

The request should resolve without any errors.

Actual Behavior

The request fails with:

Uncaught Error: unsupported BodyInit type
    at Response.Body._initBody (R:\Work\Github\my_project\node_modules\whatwg-fetch\fetch.js:231)
    at new Response (R:\Work\Github\my_project\node_modules\whatwg-fetch\fetch.js:390)
    at XMLHttpRequest.xhr.onload (R:\Work\Github\my_project\node_modules\whatwg-fetch\fetch.js:437)

It appears that the body of the fetch request is being generated as Blob(4192) {size: 4192, type: "application/json"}. However, this check Blob.prototype.isPrototypeOf(body) inside the fetch library fails.

I seems (eg. #6025) that this error occurs only for POST requests and only when failing to send the right headers. However, in my case I'm using a plain GET request, with no body and even with all the right headers set -- I get the error.

I have tried various different JSON APIs and try all return this error. I don't know what else to try.

I have also tried manually upgrading whatwg-fetch from v1.1.1 (which is what react-native installs) to v2.0.4 (which is the latest) and that returns the same error.

Using the axios module (an alternative AJAX request lib) seems to work just fine. Requests are going through without any issues.

I wonder if the "Long awaited Blob changes: upload, download, fetch locally, and more" introduced in react-native@0.54 are the cause of this (given that whatwg-fetch does constructor comparisons of global Blob objects).

[react-native-bot]

Thanks for posting this! It looks like your issue may be missing some necessary information. Can you run react-native info and edit your issue to include these results under the Environment section?

Thank you for your contributions.

[MultidimensionalLife]

I also have the same issue.

[kikoseijo]

In android right?
Same thing here, what a nightmare!

[ghost]

Having the same issue. Here's my react-native info:

Stephens-MacBook-Pro:neighborplate smsenesac$ react-native info
Scanning folders for symlinks in /Users/smsenesac/Source/neighborplate/node_modules (19ms)

Environment:
OS: macOS High Sierra 10.13.4
Node: 8.10.0
Yarn: 1.6.0
npm: 5.6.0
Watchman: 4.9.0
Xcode: Xcode 9.3 Build version 9E145
Android Studio: 3.1 AI-173.4670197

Packages: (wanted => installed)
react: 16.3.1 => 16.3.1
react-native: 0.55.2 => 0.55.2

[kikoseijo]

Here its something it might help:

jhen0409/react-native-debugger#209

[ghost]

If I could hug you right now I would. Thanks!

[IanRamosC]

Has anyone fixed this without using any 3rd party lib?

[IvanPortfolio]

I am getting the same error when using chrome debugger.

Removing XMLHttpRequest = GLOBAL.originalXMLHttpRequest ? GLOBAL.originalXMLHttpRequest : GLOBAL.XMLHttpRequest; helps, but the I can`t ispect network requests

We started experiencing this after upgrading from version 51 to 55. Is there a better way to inspect network requests?

[anthonyhumphreys]

I overcame this issue by installing reactotron.

It does grate on me having to install a heavy tool chain for something so fundamental though.

[anhpha]

Have the same issue. Is there any work on this issue?

[mcmar]

FYI: As of 2018-06-12 this is still a serious issue. No official response from React team 🙉🙈🙊. The only solution is to install either react-native-debugger or reactotron. Good luck.

[shanecav84]

This was an issue for me and my coworker @sbleon when running the remote debugger while developing with iOS. In the remote debugger, I think that all of the polyfills supplied by React Native supersede the native implementations in Chrome. This is why we need to override the XMLHttpRequest polyfill with the native Chrome implementation to get network debugging working. As a result, we also need to override the RN polyfills with native Chrome implementations for objects used by the native XMLHttpRequest. My development environment is set up like so:

if (typeof GLOBAL !== 'undefined') {
  // Route network requests through Chrome's native XMLHttpRequest
  GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest;

  // Use native Blob for native XMLHttpRequest set above
  GLOBAL.Blob = GLOBAL.originalBlob || GLOBAL.Blob;

  // Use native FileReader to read native Blob set above
  GLOBAL.FileReader = GLOBAL.originalFileReader || GLOBAL.FileReader;
}

Related:
#6025
#18740
#2538
jhen0409/react-native-debugger#209

[gabriellupu]

Per @shanecav84 's suggestion, I added in my RN@0.55 index.js inside if (__DEV__) { block the following assignments:

global.Blob = global.originalBlob ?
        global.originalBlob :
        global.Blob;
global.FileReader = global.originalFileReader ?
        global.originalFileReader :
        global.FileReader;

works fine now with this hotfix.

Full block:

if (__DEV__) {
    global.XMLHttpRequest = global.originalXMLHttpRequest ?
        global.originalXMLHttpRequest :
        global.XMLHttpRequest;
    global.FormData = global.originalFormData ?
        global.originalFormData :
        global.FormData;
    global.Blob = global.originalBlob ?
        global.originalBlob :
        global.Blob;
    global.FileReader = global.originalFileReader ?
        global.originalFileReader :
        global.FileReader;
}

[CNDW]

@gabrielbull I'm not sure why, but it looks like RN@0.55.4 is not assigning the native Blob to global.originalBlob so the above fix does not work for me.

edit
gah, it looks like it is deleted off of the global scope in the latest react-native-debugger

[vasilich6107]

Seems to be fixed in 0.56

[CNDW]

Unless I'm misunderstanding, it looks like this issue is a bug with the react-native-debugger package removing a reference to the global.Blob before react-native initializes. react-native polyfills Blob in later packages which causes the whatwg-fetch polyfill to mark Blob as supported.

When replacing react-native's XMLHttpRequest with the native one in the react-native-debugger environment it breaks the fetch polyfill because the native XMLHttpRequest is using the native Blob and the whatwg-fetch polyfill fails a strict constructor check between the native Blob and react-native's Blob polyfill that was attached to the global scope by react-native initialization.

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.