[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: https://github.com/react-native-community/async-storage/issues/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: https://github.com/jhen0409/react-native-debugger/issues/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 https://github.com/facebook/react-native/issues/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

[asurare]

@dwoniu It seems to me that this is an issue related to react-native@0.60.X+ versions only..

[kiran-mantana]

I upgraded my App to 0.60.0, I get blob as response, any update on the isssue?

We are planning app for production, There are some workarounds can we do the work arounds and move to production?

[kbrandwijk]

No, thanks to unattended issues like this, 0.60.x is NOT suitable for production. It is beyond me why these things are abandoned like this.

[roots-ai]

Hi! Promise object can be handled with...

.then((response) => response.json())
.then((responseJson) => {
   //HANDLE RESPONSE HERE
}

[hunzalashakeel1996]

does anyone found a solution about this issue please guide ?

[skurgansky-sugarcrm]

try newer version of react-native-devtools 0.9.14 for example

[hunzalashakeel1996]

@skurgansky-sugarcrm you mean to say react-devtools this npm ?

[hunzalashakeel1996]

@skurgansky-sugarcrm i am using this solution global.Blob = null and it works on both debug and release build. if this solution is fine or have some setbacks ?

[skurgansky-sugarcrm]

i mean remote dev tool app. btw when you upgraded RN did you removed all manually linked native modules? maybe there is a problem. I had same issues.

[hunzalashakeel1996]

@skurgansky-sugarcrm yeah i did actually i create app from scratch. that same code works fine on react native 0.59 but give this blob type response in 0.60.X. I use this global.blob = null trick and it works. but now i am confuse it is wrong for future or it's fine

[skurgansky-sugarcrm]

its wrong. fetch works fine.

[skurgansky-sugarcrm]

When i had this issue i searched for a solution and found old same issues for RN 0.22.x version. So this is most probably configuration problem.

[hunzalashakeel1996]

@skurgansky-sugarcrm

//get driver child from db export const login = number => { return dispatch => { return new Promise(async (resolve, reject) => { dispatch(uiStartLoading()); fetch(${url}/api/login, { method: "POST", headers: { Accept: "application/json", "Content-Type": "application/json" }, body: JSON.stringify({ number: number }) }) .then(res => { dispatch(uiStopLoading()); resolve(res) }) .catch(err => { dispatch(uiStopLoading()); Alert.alert("Error", Something went wrong \n ${err}) }) }); }; };

this is the code which i using in fetch. In my 0.59 version this return me object with status and bodyInit which has my data in object form but now there is some blob text in bodyInit

[skurgansky-sugarcrm]

yes i know. did you migrate from 0.59 to 0.60.x ? you might have wrong migration

[hunzalashakeel1996]

@skurgansky-sugarcrm I didn;t migrate my app, i create new app from scratch with react native 0.60.5 just copying my javascript code to it,

[skurgansky-sugarcrm]

difference between 0.60.x and 0.5x.x is that 0.60.x have autolinking feature for native modules (Fetch for example) there are differences in ios/Podfile and in xcode xcodeproj linking Libraries section.

[skurgansky-sugarcrm]

i create new app from scratch with react native 0.60.5 just copying my javascript code to it,

i did the same. launched simple http server on express and checked. It worked in my case. So i started to look for configuration issues. I updated react-native-devtools and removed manual links for native-modules. Since then I haven't seen this issue.

[kbrandwijk]

@skurgansky-sugarcrm Don't spread fake news on a confirmed issue. This is not about using devtools, and it's also not about migration, and it definitely has nothing to do with autolinking. As @hunzalashakeel1996 and others have mentioned. This happens on creating a new app from scratch as well, which pretty much rules out all other options anyway.

[hunzalashakeel1996]

Exactly. And if someone find solution about that please mention me on your comment.

[skurgansky-sugarcrm]

related links https://github.com/jhen0409/react-native-debugger/issues/365 + referenced inside

[chubillkelvin]

I don't see why the same issue could not appear again after a lot of version changes. I would say the issue is not "exists since 0.24.1", but rather "reappears after many versions". Same error message does not necessarily entails the same bug in the same position of the codebase as well. Many things could be different during runtime.

[WoodyWoodsta]

The ticket has been labelled as a bug, and therefore has been found to be one. What's the point in making claims about similar symptoms? We're better software developers than that! It's clearly an issue, based on the number of reactions on the ticket, and it's the first time that I have come across the symptoms. Defending it by pulling out an issue from 3 years ago does nothing but create confusion and perhaps embarrassment on your part too 😄

[Mexxerio]

Same issue on 0.60.5

setting global.Blob = null is not an option for me because other aspects of my app depend on it.

So I replaced all uses of fetch with a third party library for now. But this is most definitely a react-native bug and should be fixed as soon as possible.

[sunnylqm]

ping @janicduplessis

[YanYuanFE]

node_modules/whatwg-fetch/dist/fetch.umd.js

if ('responseType' in xhr && support.blob) {
        // xhr.responseType = 'blob';
}

debug and release work fine.

[k-varma]

Is this issue solved in 0.61.0

[SiddhantJ19]

Why is this issue closed? I can't find an answer to this issue. Please help

[bockc]

@SiddhantJ19 this issue is not closed, only the one in which it has been referenced is closed. :)

We currently have trouble upgrading our project to RN0.61, but hopefully this will fix this issue. We will keep you posted when we know more.