Missing Stream API causes problems in ReactNative

[oed]

I'm trying to get the ipfs-http-client running in react-native, but ran into an issue I wasn't able to easily solve. The problem stems from that the iso-stream-http uses the fetch stream API, which seems to be available in browsers, but is not in the RN implementation of fetch.

The problem is outlined in this stackoverflow post. It also seems that the RN team is not very interested in adding support for this.

I've tried various fetch replacements, but none of the seem to support the stream api. Now I'm wondering what the next step could be? Is there some other way around this perhaps? Happy to hear suggestions 🙂

[achingbrain]

Maybe @hugomrdias could polyfill the stream API in iso-stream-http for React Native?

Though I think longer term we are switching this module over to use ky instead - this has been done for ipfs.add in v35.0.0 and ipfs.cat in v36.0.0, do you see the same problem with those method calls in React Native?

[hugomrdias]

This should do the trick https://www.npmjs.com/package/web-streams-polyfill

[hugomrdias]

Question why are you getting the browser version of iso-stream-http? Are you bundling? You should be getting the node version

[oed]

Thanks for the quick replies!

Using ipfs.cat is not either unfortunately with a different error. The callback is called with the following error:

[TypeError: _iterator[typeof Symbol === "function" ? typeof Symbol === "function" ? Symbol.iterator : "@@iterator" : "@@iterator"] is not a function. (In '_iterator[typeof Symbol === "function" ? typeof Symbol === "function" ? Symbol.iterator : "@@iterator" : "@@iterator"]()', '_iterator[typeof Symbol === "function" ? typeof Symbol === "function" ? Symbol.iterator : "@@iterator" : "@@iterator"]' is undefined)]

I've tried to polyfill Symbol, but it's not been effective.

I just tried the web-streams-polyfil, but still have the same issue. Main problem is that body isn't defined in the response. This causes this line to throw an error.

I'm not sure why I'm getting the browser version. Is there any way I can force it to use the node one? Is that even available in RN?

Edit:
I'm using ipfs-http-client@38.0.0

[hugomrdias]

Polyfill with this https://github.com/github/fetch/blob/master/fetch.js

[hugomrdias]

Plus this for iterator in your index.js
global.Symbol = require('core-js/es6/symbol');
require('core-js/fn/symbol/iterator');

[oed]

Thanks @hugomrdias I did try adding the symbol polyfill before with no improvements. Double checked now and got the same result in ipfs.cat.

The whatwg-fetch polyfill doesn't seem to be improving the situation for ipfs.dag.get either.

[hugomrdias]

Body needs to be defined now with that polyfill what's the error

[oed]

Maybe I'm doing something wrong then. I'm adding this to index.js:

global.fetch = require('whatwg-fetch').fetch

But i still get an error saying the same thing:

TypeError: response.body is undefined

Edit: I don't see body being defined anywhere in https://github.com/github/fetch/blob/master/fetch.js

[pcowgill]

@hugomrdias What do you make of that latest error @oed was running into? Thanks!

[pcowgill]

Though I think longer term we are switching this module over to use ky instead - this has been done for ipfs.add in v35.0.0 and ipfs.cat in v36.0.0, do you see the same problem with those method calls in React Native?

@achingbrain Can you speculate on the timeline for a move to ky or similar? 1 month? 3 months? 1 year? 3 years? Thanks!

[hugomrdias]

Have you tried the latest version?

[alanshaw]

Just following up on this - is the latest version working for you both @oed @pcowgill ?

[pcowgill]

@hugomrdias @alanshaw I'll give it a try today! Was there anything in particular that changed in the latest version that you had in mind that might address this?

[alanshaw]

🙄 my apologies I just dug in deeper and unless RN has fixed their fetch impl I think this will still be a problem.