React-native-debugger: Unsupported BodyInit type - RN 0.54

[maxhungry]

With React Native 0.54, when the option __Enable Network Inspect__ is turned on, you would get Uncaught Error: unsupported BodyInit type, this may have something to do with how blobs changed in 0.54.

React Native Debugger app version: 0.7.13
React Native version: 0.54.1
Platform: iOS & Android
Is real device of platform: Yes
Operating System: macOS

[ifiokjr]

I"m getting the same issue.

[alloy]

I’m seeing this issue with plain Chrome.app DevTools as well btw, so not just an issue with this app.

[Lxxyx]

React native bugs. Not debugger.

[sibelius]

maybe this could help https://github.com/Kureev/react-native-network-proxy

[jhen0409]

Fixed in #217. I'll release the new version later.

[alloy]

Unfortunately I’m still running into the same issue (I’m on RN 0.54.2 btw)

Alas I don’t have time to debug right away, but if this turns out to work for most other people then I’ll definitely try to find some time to debug on our end.

[jehartzog]

Thank you for pushing this fix so quickly!

I'm running 0.7.16 which should have fixed this issue with #217, but I am still seeing the same error as above. Let me know if I can help resolve this.

RN 0.54.2
Android development, actual device.
MacOS

[alloy]

Interestingly it works for me if I enable the network inspector _after_ the first request.

[jhen0409]

Due to we call the method after import application script, so some fetch calls on global scope will be failed.

I just realized this mistake 🙈, I guess it may be the same as your case. @alloy @jehartzog

[toytonic]

Just gave it a try and unfortunately it does not work for me. I am running 0.7.17 and RN 0.54.2.
Also toggling the inspection after the first request as described by @alloy doesn't work.

Let me know if I can help.

[jhen0409]

@toytonic could you provide an example code?

[toytonic]

I must correct myself. Toggling after the first request DOES indeed work. Apparently there was an server issue on our end when debugging this. Sorry for the confusion.

However the issue persists when toggling it on before the first request or after a live reload.

We are using this library for our requests: https://github.com/KnisterPeter/pretend

Which internally just uses the (native) fetch api.

[alloy]

Just gave the update a try and I’m also still seeing the problem under certain conditions:

1. Launch app
2. Enable Network Inspect
3. Open first RN view that makes a fetch
4. Receive Unsupported BodyInit type error on all views that make fetches
5. Reload JS (Command-R)
6. Now all fetches keep working

You can try this with the example app in our RN repo, but you will need to create an account with artsy.net

[jhen0409]

Thanks for the examples!

I think the issue of first request wil be fixed by https://github.com/jhen0409/react-native-debugger/commit/792549a400329159fbd768439b2d2f02a95f5095. I haven't yet release a new version but you can try it first by follow the documentation. Let me know if it's fixed for you.

[alloy]

Yup that’s it! Works perfect now 👍

Thanks for the fast fixes 👏

[sibelius]

@jhen0409 any plan to get a release for this fix?

[jhen0409]

@sibelius I think v0.7.18 already included my all fixes, is that still have the bug for you?

[sibelius]

this is breaking on 0.7.18

when we add this to our entry .js file

global.XMLHttpRequest = global.originalXMLHttpRequest ?
  global.originalXMLHttpRequest :
  global.XMLHttpRequest;
global.FormData = global.originalFormData ?
  global.originalFormData :
  global.FormData;

without this, it works, but we can't inspect network

[tzilist]

We are also seeing this issue still. @sibelius comment works, however, we can't see the network requests either.

[alloy]

@sibelius I removed such code from our codebase and instead started using the contextual menu in the debugger app to enable network inspecting.

[sibelius]

this is the contextual menu, gonna try again, and let your guys know

[kholiavko-roman]

I have an issue with 0.7.18 version, If I enable "Network inspect" in contextual menu.
fetch.js:231 Uncaught Error: unsupported BodyInit type

react-native: 0.55.2
OS: Ubuntu 17.10

[Freddy03h]

Same issue with react-native-debugger 0.7.18, react-native 0.55.2, macOS 10.13.4

[sedvardsen]

@alloy's solution worked for me as well

[alloy]

One possible difference I have been noticing is that maybe it’s due to RN version? We’re on RN 0.54

[kikoseijo]

After the query,

body = Blob {size: 609, type: "application/json"}

And the conditional its not able to match its prototype,

[fr1n63]

Still seeing the issue in 0.54.4, fails if the network inspector is enabled from load, doesn't log any network activity if enabled post launch.

[Anshiii]

i can see this issue after i updated from 0.48.2 to 0.55.3

[Anshiii]

react-native:0.55.3
React Native Debugger 0.7.18
I can see this issue after i updated rn from 0.48.2 to 0.55.3...
And then , i see the code where error be throw in fetch.js...
So i do this...

fetch(url, {
      method: 'GET',,
      headers,
      body:' ' //the code i added
    }

And then enable the network... Luckily,everything were be ok~~
What is intriguing is that after i deleted the code body:' ' ,there is no error more.

[sibelius]

this is working for on 0.53.3 using this https://github.com/jhen0409/react-native-debugger/issues/209#issuecomment-379917990

[dodsky]

react-native: 0.55.3
React Native Debugger 0.7.18

We removed the "network switch" snippet from index and enabled Network inspect in context menu. The issue went away after that.

global.XMLHttpRequest = global.originalXMLHttpRequest ?
  global.originalXMLHttpRequest :
  global.XMLHttpRequest;
global.FormData = global.originalFormData ?
  global.originalFormData :
  global.FormData;

[jpudysz]

@sibelius , @dodsky
Confirmed 👍

[jhen0409]

Currently we just fixed the specify Enable Network Inspect feature in RNDebugger, so it shouldn't work if you only did the XHR replacement.

If you don't want to use the Enable Network Inspect feature RNDebugger, you can use the following code:

global.XMLHttpRequest = global.originalXMLHttpRequest ?
  global.originalXMLHttpRequest :
  global.XMLHttpRequest;
global.FormData = global.originalFormData ?
  global.originalFormData :
  global.FormData;

fetch; // Ensure to get the lazy property

// RNDebugger only
if (window.__FETCH_SUPPORT__) {
  window.__FETCH_SUPPORT__.blob = false
}

And ensure the Network Inspect of RNDebugger is disabled.

I can reopen it if someone still have the issue.

[psolom]

@jhen0409 No matter either I do the XHR replacement or enable Network Inspect feature I got the fetch.js:231 Uncaught Error: unsupported BodyInit type error.

The fetch works only if both are disabled. Obviously I can't inspect the network in this case. Quite annoying.

Seems this happens for Chrome Dev Tools as well. I doubt this is RND specific bug, anyway I couldn't find a solution, unfortunately.

react-native: 0.55.3
React Native Debugger 0.7.18

[lasfin]

Same issue with
react-native: 0.54.2
React Native Debugger: 0.7.18

[sgript]

Same issue on:
react-native -> 0.55.0
react native debugger -> 0.7.18

[shanecav84]

I deleted my comment with my solution and moved it here because it's an issue with React Native, not this debugger.

[ospfranco]

@shanecav84 Seems previous link has been closed due to inactivity, I had no issues until react-native 0.58, I just upgraded to 0.59 and now facing issues again.

[vitalii]

have the same issue after upgrade to 0.59

[declanelcocks]

Same for me after upgrading to 0.59

[abhijeetdhope]

Everything was working fine, we upgraded from 0.58 to 0.59 and this problem started showing up.
I have already tried everything mentioned up in the comments, nothings seems to be working.

[ospfranco]

I started using axios as a workaround, it is also not a bad idea since the fetch API had some problems on older models

[sseppola]

Got this problem when we upgraded to react-native 0.59.4 (from 0.57).
It was fixed by removing the workaround from https://github.com/jhen0409/react-native-debugger/issues/242

React Native Debugger v0.9.7
Edit: Network inspect works as expected after removing the snippet ☝️

[meshaabi]

the fetch issue was resolved by removing the snippet, but network requests dont show up in the debugger anymore.

[Thomasn57]

the fetch issue was resolved by removing the snippet, but network requests dont show up in the debugger anymore.

Same issue for me, removing the snippet worked but now the requests are invisible in the network tab

[W1nstar]

I'm having the same problem,

react-native: 0.59.8
rn-debugger: 0.9.8

If I enable network debugging, I can see the network request completing but a console error pops up and the app does not continue
c:\RN\node_modules\react-native\Libraries\vendor\core\whatwg-fetch.js:279 Uncaught Error: unsupported BodyInit type at Response.Body._initBody (c:\RN\node_modules\react-native\Libraries\vendor\core\whatwg-fetch.js:279) at new Response (c:\RN\node_modules\react-native\Libraries\vendor\core\whatwg-fetch.js:450) at XMLHttpRequest.xhr.onload (c:\RN\node_modules\react-native\Libraries\vendor\core\whatwg-fetch.js:500)

I tried the snippet on the app's entry point, didn't work. If I change to using axios, it doesn't error, so I'm guessing it's a fetch thing

[KirbyMcKenzie]

@W1nstar - I found adding the following snippet in my app's entry point seemed to work.

global.XMLHttpRequest = global.originalXMLHttpRequest
 ? global.originalXMLHttpRequest
 : global.XMLHttpRequest
global.FormData = global.originalFormData
 ? global.originalFormData
 : global.FormData

fetch // Ensure to get the lazy property

if (window.__FETCH_SUPPORT__) {
 // it's RNDebugger only to have
 window.__FETCH_SUPPORT__.blob = false
} else {
 /*
  * 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
 global.FileReader = global.originalFileReader
   ? global.originalFileReader
   : global.FileReader
}

[louisholley]

if anyone else is having trouble, i found that using https://github.com/facebook/react-native/issues/18818#issuecomment-399162418 and commenting out the line GLOBAL.blob = ... is working after updating

[pbassut]

Also fails on RN 0.59.9

[HugoLiconV]

I'm, getting this error too. I have RN 0.59.10 and React Native Debugger 0.10.5