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

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

About this issue

  • Original URL
  • State: open
  • Created 6 years ago
  • Reactions: 38
  • Comments: 50 (13 by maintainers)

Commits related to this issue

Most upvoted comments

image

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

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

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

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.

@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.

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

@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
}

have the same issue after upgrade to 0.59

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

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

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

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

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 Screen Shot 2019-04-18 at 19 44 40 React Native Debugger v0.9.7 Edit: Network inspect works as expected after removing the snippet ☝️

@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

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

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

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

Same for me after upgrading to 0.59

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

@sibelius , @dodsky Confirmed 👍

Yup that’s it! Works perfect now 👍

Thanks for the fast fixes 👏