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

MasoudAlali commented 5 years ago

React Native version: 0.60.3

Steps To Reproduce

upgrade react native to 0.60.3 and clean node modules and install it again
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

saboosrishti commented 5 years ago

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!!!

bockc commented 5 years ago

@SiddhantJ19 @k-varma I just finished updating our project to RN0.61 and I confirm that the issue is still here. Maybe this could be a dependency that causes this issue ?

SergueyPutilin commented 5 years ago

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 commented 5 years ago

I fixed this by using this code in componentDidMount in my app.js before I do any calls. https://github.com/jhen0409/react-native-debugger/issues/382#issuecomment-544226529

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 commented 5 years ago

@SergueyPutilin Thanks! This resolves the issue for me.

bockc commented 5 years ago

@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 commented 5 years ago

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 commented 4 years ago

the same problem

quanzaiyu commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

https://github.com/jhen0409/react-native-debugger/issues/365#issuecomment-524345356

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 commented 4 years ago

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 commented 4 years ago

Any update ?

garrettjoecox commented 4 years ago

~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 commented 4 years ago

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

See next comment

jasperkuperus commented 4 years ago

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[bot] commented 3 years ago

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.