Networking fetch - Failed to execute 'readAsText' on 'FileReader' parameter 1 is not of type 'Blob'.

[LA]

Is this a bug report?

Yes

Have you read the Bugs section of the How to Contribute guide?

Yes

Environment

1. react-native -v: 0.43.3
2. node -v: v7.6.0
3. npm -v: 5.3.0
4. yarn --version:

Then, specify:

• Target Platform: iOS

• Development Operating System: macOS

• Build tools: react-native run-ios --simulator='iPhone 7'

Steps to Reproduce

Getting response.json() from GET request causes the error.

try {
  //let url = getCustomTokenURL(userId);
  let url = 'https://www.reddit.com/r/bitcoin/hot.json';
  console.log('URL: ' + url);
  let response = await fetch(url);
  let responseJson = await response.json();
  console.log('JSON:' + responseJson.token);
} catch (error) {
  console.log('Error getting custom key: ' + error.stack);
}

Expected Behavior

I thought I'd get the JSON from the link. I'm actually trying to use localhost, but I used Reddit to see if it still occurred with HTTPS, which it does.

Actual Behavior

I received the error in the title after the '-' and got the following stacktrace (note the link definitely returns json):

Error getting custom key: TypeError: Failed to execute 'readAsText' on 'FileReader': parameter 1 is not of type 'Blob'.
    at readBlobAsText (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:6045:12)
    at Response.Body.text (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:6139:16)
    at Response.Body.json (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:6156:19)
    at LoggedOutPage._callee2$ (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:66485:56)
    at tryCatch (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:7396:40)
    at Generator.invoke [as _invoke] (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:7584:22)
    at Generator.prototype.(anonymous function) [as next] (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:7421:21)
    at tryCatch (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:7396:40)
    at invoke (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:7454:20)
    at http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:7462:13

Reproducible Demo

¯\_(ツ)_/¯

[hramos]

Is there a particular json that triggers this? Try fetching other json-formatted documents and see if the error appears. ¯_(ツ)_/¯

[LA]

@hramos Thanks for responding, I truly appreciate it.
Please correct me if I'm confused, but I tried reddit and localhost json as you can see in the OP, and now just tried with https://api.github.com/users with the same result. Is there any other kind of json that I could try?

[LA]

Also just to be clear, I am allowing Arbitrary Loads in my Info.plist, but that should already be obvious because it doesn't work with https either.

[LA]

Tried as well with the facebook movies.json example to no avail.

Fixed by switching to react-native-fetch-blob and making a standard GET request

[robhogan]

This seems to be an issue when using a remote JS debugger - the body has already been used so res.json() fails. As a workaround I'm currently using something like this:

try {
  return await response.json();
} catch(e) {
  return JSON.parse(response._bodyBlob.data);
}

[ashermja]

I'm having the same problem after upgrading to react-native: 0.51.0 worked ok with 0.44.0. Currently using the workaround (thanks @rh389) and am considering using react-native-fetch-blob. Does this mean that we cant use fetch at all anymore, without the workaround? I'm guessing it must still work for some people as I'm sure there would be more comments about it here.

To confirm I'm having the same problem with any api call returning json whilst the debugger is active using the IOS simulator.

react-native: 0.51.0
node -v7.10.1
react 16.0