React-native-debugger: SyntaxError: Unexpected token o in JSON at position 1

[jgcmarins]

React Native Debugger app version: 0.9.10
React Native version: 0.60.4
Platform: iOS
Is real device of platform: simulator
Operating System: macOS

I have a local GraphQL running and my app is fetching it locally with Relay. When I enable network inspect, I see "SyntaxError: Unexpected token o in JSON at position 1"

The Relay setup is this one: https://github.com/entria/entria-fullstack/tree/master/packages/app/src/relay

We're using RelayNetworkLogger: https://github.com/entria/entria-fullstack/blob/master/packages/app/src/relay/Environment.tsx#L13

It worked until 2 months ago.

Any idea?

[jgcmarins]

I think I have a feeling of what's going on:

Without network inspect

With network inspect -> _bodyText: "[object Blob]"

[karltaylor]

Related #365

[jhzqq2003]

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
  }
  .node_modules\react-native\Libraries\Core\InitializeCore.js

[CodyBrouwers]

The issue is still present in React Native Debugger 0.10.2 for me.

Like @jhzqq2003 mentioned, if you put this code somewhere that it is run before network requests are made, like at the top of your root index.js file, it fixes the issue:

global.XMLHttpRequest = global.originalXMLHttpRequest || global.XMLHttpRequest;
global.FormData = global.originalFormData || global.FormData;

if (window.FETCH_SUPPORT) {
  window.FETCH_SUPPORT.blob = false;
} else {
  global.Blob = global.originalBlob || global.Blob;
  global.FileReader = global.originalFileReader || global.FileReader;
}

[martinezguillaume]

Hey ! I don't know why this issue is closed, but I have the same problem with RN 0.61.2 and RNDebugger 0.10.2. The fix above works great btw.

[karltaylor]

Yep this is happening again for me

[fierysolid]

The above fix makes it so the requests don't fail, but the payload no longer shows in the preview.

[karltaylor]

CC @jhen0409

[jhen0409]

It looks React Native CLI dropped support for Delta bundler (https://github.com/react-native-community/cli/commit/b88deca34648449a54aad09c1ad63033d4b97098), and it was fixed in master (https://github.com/jhen0409/react-native-debugger/commit/a9e4a9f3859fed0242e9fe2be7f87eeb525fe1f5), it will be release soon.

For temporary workaround, maybe we can downgrade @react-native-community/cli to 3.0.0-alpha.2. (add in resolutions)

[kierangillen]

Was able to fix using this: https://github.com/jhen0409/react-native-debugger/issues/432#issuecomment-569184047

[VolodymyrErsteniuk]

The above fix makes it so the requests don't fail, but the payload no longer shows in the preview.

Check if you pass Content-Type in headers and if you are stringifying your payload

[nkpatnis]

Was facing same issue for RN 0.62.2
and was able to fix it by updating this
https://github.com/jhen0409/react-native-debugger/releases
to v0.11.3

[phsantiago]

If someone is using https://github.com/jhen0409/react-native-debugger/issues/382#issuecomment-544226529 with typescript and getting Property 'FETCH_SUPPORT' does not exist on type 'typeof window', you could try like this:

if (__DEV__) {
  global.XMLHttpRequest =
    global.originalXMLHttpRequest || global.XMLHttpRequest;
  global.FormData = global.originalFormData || global.FormData;

  if ((window as any).FETCH_SUPPORT) {
    (window as any).FETCH_SUPPORT.blob = false;
  } else {
    global.Blob = global.originalBlob || global.Blob;
    global.FileReader = global.originalFileReader || global.FileReader;
  }
}

[Jonathan0wh]

Any plan to fix it on react-native-debugger <= 0.10?
It seems to be already fixed for >= 0.11 such that people don't need any fetch polyfill or fix for this version

[darkbasic]

@Jonathan0wh why would you want to be stuck on 0.10? Just upgrade it...

[Jonathan0wh]

Hi @darkbasic we are still using "react-native": "0.61.5", and it still takes some time for our team to decide to upgrade to > 0.62...

[gaberogan]

@darkbasic same, the decision to upgrade to 0.62 takes time

[jasperkuperus]

Was facing same issue for RN 0.62.2
and was able to fix it by updating this
https://github.com/jhen0409/react-native-debugger/releases
to v0.11.3

After a long search, this is what helped me. I'm also on 0.62.2 and have this issue, but upgrading to >0.11 RN Debugger saved me. No need to add hacky code to your project 😊 More info about compatibility here:

https://github.com/jhen0409/react-native-debugger#notice-react-native-compatibility

[glennreyes]

Without the workaround mentioned above, I was still experiencing the exact same issue.

    "@apollo/client": "^3.2.5",
    "graphql": "^15.4.0",
    "react": "^17.0.1",
    "react-native": "^0.63.3",

With react-native-debugger 0.11.5

[cepem]

Just commenting here to say huge thanks to @jhzqq2003. This problem has been bothering me for the past few days and I had no idea why this was happening. It was also happening in the production build.

This still occurs on the following config:

"@apollo/client": "^3.2.9",
"graphql": "^15.4.0",
"react": "16.13.1",
"react-native": "0.63.3",

With react-native-debugger 0.11.5

[hlavrencic]

Solved removing this:

// To see all the requests in the chrome Dev tools in the network tab.
XMLHttpRequest = GLOBAL.originalXMLHttpRequest ? GLOBAL.originalXMLHttpRequest : GLOBAL.XMLHttpRequest;// fetch logger
global._fetch = fetch;
global.fetch = function(uri, options, ...args) {
 return global._fetch(uri, options, ...args).then(response => {
     console.log('Fetch', { request: { uri, options, ...args }, response });
     return response;
 });
};

Same problem to me:

"dependencies": {
"@react-native-community/masked-view": "0.1.10",
"@react-navigation/drawer": "^5.11.4",
"@react-navigation/native": "^5.8.10",
"@react-navigation/stack": "^5.12.8",
"expo": "~40.0.0",
"expo-status-bar": "~1.0.3",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "^0.63.4",
"react-native-debugger": "^1.1.0",
"react-native-elements": "^3.0.1",
"react-native-gesture-handler": "~1.8.0",
"react-native-reanimated": "~1.13.0",
"react-native-safe-area-context": "3.1.9",
"react-native-screens": "~2.15.0",
"react-native-vector-icons": "^7.1.0",
"react-native-web": "~0.13.12",
"react-navigation": "^4.4.3",
"react-redux": "^7.2.2",
"redux": "4.0.0",
"redux-logger": "3.0.6",
"redux-thunk": "2.2.0"

[cepem]

@hlavrencic this is getting pretty annoying at this point. Better off start using flipper :)

[MrQureshi]

The issue is still present in React Native Debugger 0.10.2 for me.

Like @jhzqq2003 mentioned, if you put this code somewhere that it is run before network requests are made, like at the top of your root index.js file, it fixes the issue:

global.XMLHttpRequest = global.originalXMLHttpRequest || global.XMLHttpRequest;
global.FormData = global.originalFormData || global.FormData;

if (window.FETCH_SUPPORT) {
  window.FETCH_SUPPORT.blob = false;
} else {
  global.Blob = global.originalBlob || global.Blob;
  global.FileReader = global.originalFileReader || global.FileReader;
}

after this, I'm facing network error