[60.3] fetch issue [unable to parse json, unexpected token in json at position 1]

[MasoudAlali]

React Native version:
0.60.3

Steps To Reproduce

1. upgrade react native to 0.60.3 and clean node modules and install it again
2. send a request with fetch

there will be error like this:
unexpected token o in json at position 1

and I investigated for issue and it happens because in whatwg-fetch library
in line 492 support.blob will be true and the response from xhr will be Blob
so in fetch response.json() will fail because response is Blob not stringified json

there are some hotfixes, but I don't know exact solution for this

[kbrandwijk]

This seems rather major, with basic fetch functionality just being completely broken after spending a lot of time on the 0.60 upgrade. Looking forward to an ETA on this.
In the meantime, I'd also take a hotfix, I haven't been able to find one yet.

[MasoudAlali]

This seems rather major, with basic fetch functionality just being completely broken after spending a lot of time on the 0.60 upgrade. Looking forward to an ETA on this.
In the meantime, I'd also take a hotfix, I haven't been able to find one yet.

you can somehow disable blob support in your project, because in whatwg-fetch it's checking support.blob :)
it's not good one but you can temporary do global.Blob = null in your init

[kennym]

Experiencing the same problem in 0.60.4

/cc @lklepner

[bockc]

just updated to RN 0.60.4, I can confirm that I receive a blob when I used to receive a stringified json before. Fetch is unusable in its current state, thus making RN 0.60.4 unusable aswell. I will wait for a fix

[asurare]

Same issue for me on RN 0.60.4 as well. Did not find any viable solution yet.

[kbrandwijk]

I tried the global.Blob workaround, and it seemed to work fine in debug mode, but somehow does not work in release mode...

[chubillkelvin]

I encountered the same problem in my project.

For some reason, I managed to fix this (and I still cannot explain what happened) by downgrading some dependencies and clean build the app again.

Here's the dependencies I changed:
@react-native-community/async-storage 1.6.1 --> 1.5.1
react-native-device-info 2.3.0 --> 2.2.2
react-native-linear-gradient 2.5.6 --> 2.5.5
@babel/plugin-proposal-decorators 7.4.4 --> 7.2.0
react-test-renderer 16.8.6 --> removed

I don't exactly know which one fixed my problem, but it works for me now. Hope this helps whoever is struggling with this problem.

My react-native version is 0.60.4 and react version is 16.8.6.

[rshaikhcornerstone]

I am getting just this warning
{"line":"24531", "coloumn":"31", "sourceURL":"http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false"}

[kennym]

fetch stops working for us after using a AsyncStorage.setItem operation in 0.60.4, if we skip that, fetch works as expected.

We have posted a reproducible test scenario here: react-native-async-storage/async-storage#174

We are not entirely sure if this is something that has to be fixed on the react-native or on the async-storage side, but this defect started happening with 0.60.x, which is why I'm linking this thread.

Hoping for some insightful feedback.

[kennym]

For us, it is an issue with 'Network Inspect' in the debugger: jhen0409/react-native-debugger#365

Disabling that fixes this issue.

[kbrandwijk]

@kennym That's a workaround at best, and it definitely doesn't fix this issue.

[briangonzalez]

@kbrandwijk Have you been able to find a fix?

[macnibblet]

Anyone had any success here?

[bockc]

I encountered the same problem in my project.

For some reason, I managed to fix this (and I still cannot explain what happened) by downgrading some dependencies and clean build the app again.

Here's the dependencies I changed:
@react-native-community/async-storage 1.6.1 --> 1.5.1
react-native-device-info 2.3.0 --> 2.2.2
react-native-linear-gradient 2.5.6 --> 2.5.5
@babel/plugin-proposal-decorators 7.4.4 --> 7.2.0
react-test-renderer 16.8.6 --> removed

I don't exactly know which one fixed my problem, but it works for me now. Hope this helps whoever is struggling with this problem.

My react-native version is 0.60.4 and react version is 16.8.6.

@RageBill states this works. I haven't tried it yet, as I don't consider downgrading packages being a fix at all. If you have no other choice and absolutely have to use RN 0.60, you may give it a shot.

[kbrandwijk]

No, just no. This is a breaking issue, and should be treated as such. This has been going on for almost a month now, I guess everyone just knows you have no way out once you're heavily invested in using RN...

[kozillla]

Was having the same issue (in Andorid release version), in my case, I fixed it by adding android:usesCleartextTraffic="true" to AndroidManifest.xml , more info #24627

hope it helps !

[WoodyWoodsta]

XHR returning a Blob is not the issue. It's the fact that the check for whether or not the response is a Blob here is trivially failing. It appears that xhr is using its own Blob prototype compared to the globally defined Blob. I wouldn't have a clue on how to resolve.

[RikSchefferOberon]

I found a workaround by disabling Blob support in fetch:
edit node_modules/whatwg-fetch/fetch.js
and node_modules/react-native/node_modules/whatwg-fetch/fetch.js
and node_modules/react-native/node_modules/whatwg-fetch/dist/fetch.umd.js

at the top of the files edit the support variable:
replace:
var support = {
searchParams: 'URLSearchParams' in self,
iterable: 'Symbol' in self && 'iterator' in Symbol,
blob:
'FileReader' in self &&
'Blob' in self &&
(function() {
try {
new Blob()
return true
} catch (e) {
return false
}
})(),
formData: 'FormData' in self,
arrayBuffer: 'ArrayBuffer' in self
}

with:
var support = {
searchParams: 'URLSearchParams' in self,
iterable: 'Symbol' in self && 'iterator' in Symbol,
blob: false,
formData: 'FormData' in self,
arrayBuffer: 'ArrayBuffer' in self
}

[bockc]

This is absolutely not a workaround, most especially if you need to work with blobs at some point in your application.
I understand that facebook's team must have a ton of work to do, but this is a very major issue and has been there for over one month now, we need this to be fixed in order to upgrade to RN 0.60.
Hope they release 0.60.5 with a fix for this very soon :|

[WoodyWoodsta]

I totally agree. If you are going to patch whatwg-fetch, at least make the change to this line to fix the usage of Blobs. To simply override Blob support is not constructive in the slightest.

[RikSchefferOberon]

sadly 0.60.5 did not fix this for me

[wanxue0804]

"react": "16.8.3",
"react-native": "0.59.9",

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

fetch
// 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
// }

then

Enable Network Inspect

it seemed to work fine for me

[SergueyPutilin]

I have the same problem on rn 0.61.2 when I send a cookie with my fetch call. The call only works when I have RN debugger open and have global.blob set to null.

[SergueyPutilin]

I fixed this by using this code in componentDidMount in my app.js before I do any calls.
jhen0409/react-native-debugger#382 (comment)

It does seem that this is a dependancy issue (I think). When I commented the line of code that @YanYuanFE mentioned a few comments prior. All of my calls work as intended.
But this workaround is not a good one since you have to do this every time you delete node_modules.

[roots-ai]

@SergueyPutilin Thanks! This resolves the issue for me.

[bockc]

@SergueyPutilin I had the same issue after upgrading to RN0.61. I literally have no clue whatsoever of what happened, but I installed axios as a dependency, tested and still got the same issue. I removed it from my package.json, uninstalled it and everything went perfectly fine after that.

Any reinstallation of node_modules after that went perfectly fine and the problem disappeared. I really don't know, but, it works....

[Relax594]

I am facing something really strange with react native debugger, I can see the result of fetch calls only when the network inspect mode is enabled, if I disable the network inspect mode I don't get any response and get an error "Unhandled promise rejection Network request fail".
I am using RN - 0.60.3 and react native debugger latest version...
Any leads on this issue will be really appreciated.
Thanks!!!

exactly this. Whenever i run the debugger, everything is working fine. When i try to run it without debugger my app just freezes while running the fetch.

[quanzaiyu]

the same problem

[quanzaiyu]

It seems to be the problem of reaction-native-debugger.

If open debugger mode with reaction-native-debugger, and add GLOBAL.XMLHttpRequest... in index.js can lead to this problem.

Just remove this line:

GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest

see Network Inspect not working with RN 0.60.0 #365

[qalqi]

In react-native body.constructor.name == 'Blob' gives true where as Blob.prototype.isPrototypeOf(body) gives false for blobs.

I am able to fix it as

  else if (body && body.constructor && body.constructor.name == 'Blob') {
        this._bodyText = body = body.text()
}

Add this condition to https://github.com/github/fetch/blob/7232090c04e1ddefb806910bbd0a756bc8aac2f0/fetch.js#L229

[Shobson-three29]

jhen0409/react-native-debugger#365 (comment)

I had the exact issue, and i found a solution in the comment that i've linked. my react-native-debugger was on a pretty old version, and upgrading it to the newest version solved the issue.

without the debugger running at all, i was getting network errors. with the debugger running, i was getting the parsing error. now i can make fetch calls with the debugger running and it works as intended. no other workarounds are needed.

[jm555jm]

I solved my problem by adding param 'encoding'.
in fetch.js, readBlobAsText does not specify the encoding(default is UTF-8),
and response.text() will goto undefined, so response.json() will throw error.
(response.json is equal to JSON.parse(result of response.text()))

function readBlobAsText(blob, encoding) {
  var reader = new FileReader();
  var promise = fileReaderReady(reader);
  reader.readAsText(blob, encoding);
  return promise
}

Before do this, you can check if response.text() is undefined,
if true, your blob may read failed by FileReader

[quentingirard]

Any update ?

[garrettjoecox]

For what it's worth downgrading @react-native-community/async-storage from 1.6.1 to 1.5.1 fixed this in our case Was a fluke, still broken for us

[jasperkuperus]

ping @hramos I can confirm this is still an issue on 0.62.2

See next comment

[jasperkuperus]

ping @hramos I can confirm this is still an issue on 0.62.2

Sorry about that ping. So, apparently, if you're using RN Debugger that's older than 0.11 and RN that's 0.61+, then you'll need to upgrade your RN Debugger. See here about compatibility:

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

Then there is no need to add any of the mentioned hacks to your codebase.

[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 a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[asurare]

Can this issue be closed @MasoudAlali ?

[didrikg]

I still have this issue with RN 0.63.4 and React Native Debugger 0.11.5

[pavel-stryber]

This helped but typescript is really unhappy with this.

https://github.com/jhen0409/react-native-debugger/issues/382#issuecomment-646874107

[perry-mitchell]

This helped us on RN 0.66.1. Can't believe this is still an issue 😕

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions]

This issue was closed because it has been stalled for 7 days with no activity.