Symbol() not a thing on Android/iOS < 9 in React Native

[redux-saga]

Symbol() not a thing on Android/iOS < 9 in React Native

[yelouafi]

You include import babel-polyfill at the top of your entry point file. Like in the examples

https://github.com/yelouafi/redux-saga/blob/master/examples/counter/src/main.js#L2

[skellock]

npm install es6-symbol --save

index.android.js & index.ios.js

import 'es6-symbol/implement'

Just until either the React Native polyfill works or Symbols get removed from redux-saga.

[slorber]

@skellock generators and symbols are ES6. Are you sure you preprocessed the lib files with Babel?

[skellock]

Yeah. All the right Babel transforms are working great. The code I'm running has lots of es6. This surprised me too.

Perhaps React Native is using an older JavaScriptCore version on Android?

I wonder if this fails on iOS 8 as well? I think that predates es6 inclusion as well. Will test when I get back in front of my computer.

I've seen a polyfill out there too for injecting Symbol globally too. Of course, that feels wrong though.

[skellock]

Just checked on iOS 8.4. Doesn't work there either unfortunately.

https://kangax.github.io/compat-table/es6/

[skellock]

A ugly work-around for now uses this polyfill: https://github.com/medikoo/es6-symbol

npm install es6-symbol --save

Then, in ./node_modules/react-saga/lib/index.js, on line 2 add this horrible hack: require('es6-symbol/implement'). Eep. I feel dirty just typing that.

Works on iOS 8 and Android devices (4 and 6) now.

[yelouafi]

Symbols are mainly used to ensure reliable uniqueness of constants. If this is an issue, I can replace them with simple namespaced strings.

I'm a bit surprised, i thought babel would polyfill Symbols by itself

[skellock]

Unexpected indeed. Symbol certainly seems different than the rest of the es6'isms.

Untranspilable.

I'd be your Internet BFF if you'd replace Symbols with the something that ensured compat for these platforms.

Lemme know if I can test anything. I'd be happy to.

[tappleby]

not sure if the same applies for RN but browsers need to include the babel-polyfill - https://babeljs.io/docs/usage/polyfill/

[skellock]

Great point Terry. More of an environmental issue than a redux-saga issue? Lemme chase that lead. Perhaps just modifying my .babelrc might be an easier way out?

[tappleby]

@yelouafi perhaps its worth mentioning in readme?

[skellock]

I didn't have any luck with babel-polyfill. Upon import it threw undefined is not a function (evaluating 'babelHelpers.typeof(window)'). Makes sense I guess. There is no window.

I guess that's more for browser land? Was worth a shot!

So I removed the hack from the redux-saga index.js file and I placed it in my entry point index.ios.js and index.android.js now have their line 1 say:

import 'es6-symbol/implement'

Works good so far. Tested on ios 8 sim, ios 9 device, android 4.4 device, android 6.x device.

[yelouafi]

@tappleby yes I guess so.

@skellock I think I'll remove the Symbol mentions anyway. As they're not that important in the code

[skellock]

Cheers. Thanks for the advice @yelouafi & @tappleby !

[lukehedger]

A Symbol transform has now been added to the babel-preset-react-native in RN so should have support in an upcoming release

Edit - this is now supported in 0.20

[peterlazar1993]

I still have this issue running react native v0.20 :(

[babbarankit]

I have used the line import 'es6-symbol/implement in index.android.js
What could be the reason?

[ryyppy]

Not sure if this fits to this issue, but I can remember we looked in here for a solution... so we had also problems with symbols, after importing babel-polyfill we got it running on iOS, but not on Android.

We realized there was some issue in the redux-saga/util submodule, so we monkeypatched following code:

import { fork } from 'redux-saga/effects';

import watchFetchComments from './watchFetchComments';
import watchFetchLikes from './watchFetchLikes';
import watchFetchSocialFeed from './watchFetchSocialFeed';

// TODO this should be removed as soon as rn can handle
// the weird is.func(it[Symbol.iterator]) thing
import { utils } from 'redux-saga';
utils.is.iterator = function iterator(it) {
  return it && utils.is.func(it.next);
};

export default function* root(getState) {
  //....
}

Now we can use redux-saga on both platforms :-)

[skellock]

Curious. Thanks for sharing.

The only mobile platform that currently supports Symbol is iOS 9+. (actually that's not entirely true, I haven't tested all Androids, just a handful of old & new). The missing Symbol is on iOS 8 as well.

The lightest way I've found to support this is to use the es6-symbol plugin from above.

babel-polyfill does more, but you still need to import it manually somewhere in your entry point. I'm guessing you might have forgotten to do that step? Which is why it will be failing on iOS 8 & Android. (Just guessing, no disrespect meant).

Truthfully, I find this all so complicated. What really helped was reading this article:

https://medium.com/@housecor/babel-6-cheat-sheet-7344f7936f2d

Specifically the section on "Be Sure To Polyfill".

We shouldn't need the monkeypatch to get it to work, but kudos: you're a smarter & braver man than I.

👍

[yelouafi]

@ryyppy The last releases implements something like your solution

https://github.com/yelouafi/redux-saga/blob/master/src/internal/utils.js#L23.

[ryyppy]

@skellock You are totally right, monkey-patching is probably the worst way to fix things, but for our use-case it worked out really well! We used version 0.8.2 in that time... I was very sure that the next minor patches will fix this issue (hence the TODO comment) ;-)

@yelouafi Looking good, will try this out and probably deprecate my comment if everything works

[cacaocake]

Thank you! It works to me!

[Junam]

Encountered the same issue with web-stomp over sockJs (react native) on android device, inspired by @yelouafi solution adding

require("babel-polyfill");

on the entry point js fixed it after few hours of digging the net.

Thanks a lot.