Polyfill ES6 Symbol

[atom992]

Hi, my env:
react-native-cli : 0.1.7
react-native : 0.16.0
react-native-icons: 0.7.0

when I run my app ,I got the following error:

E/ReactNativeJS( 2973): Can't find variable: Symbol

but the Example of react-native-icons works fine.

[facebook-github-bot]

Hey atom992, thanks for reporting this issue!

React Native, as you've probably heard, is getting really popular and truth is we're getting a bit overwhelmed by the activity surrounding it. There are just too many issues for us to manage properly.

• If this is a feature request or a bug that you would like to be fixed by the team, please report it on Product Pains. It has a ranking feature that lets us focus on the most important issues the community is experiencing.
• If you don't know how to do something or not sure whether some behavior is expected or a bug, please ask on StackOverflow with the tag react-native or for more real time interactions, ask on Discord in the #react-native channel.
• We welcome clear issues and PRs that are ready for in-depth discussion; thank you for your contributions!

[satya164]

@atom992 Probably you've some code using ES2015 Symbols? Can you share your code?

[DanielHoffmann]

@atom992 you are probably having the same problem as me in #4587 try removing all instances of for of in your code.

[skevy]

@atom992 @DanielHoffmann I actually just ran into this issue on iOS 8. I personally just used the babel-polyfill (http://babeljs.io/docs/usage/polyfill/) to fix it...there are other Symbol polyfills that may be smaller (since babel-polyfill polyfills lots of things). Use at your discretion and let us know if it fixes it!

[vjeux]

Our goal with React Native is to provide a consistent js environment across all the platforms. We should polyfill it. @skevy want to take on this task?

TaskRabbit also hit this issue because IOS 9 has Symbol but not IOS 7 and 8: http://tech.taskrabbit.com/blog/2015/12/17/react-native-launch/

[atom992]

any update?

[satya164]

ping @skevy

[skevy]

So, I'm sure I can bring in a symbol polyfill easy enough...but does anyone know of anything else that should be polyfilled on anything less than ios 8?

[atom992]

I am running on android 5.0.1 emulator, when I run as "debug in chrome",this error will not show,but when I run on real device, when ever I run as "debug in chrome" or not, I always show the error.

[atom992]

when I run my real device(with ./gradlew installRelease) I got the following error:

I/ReactNativeJS(31911): Running application "Myapp" with appParams: {"initialProps":{},"rootTag":1}. __DEV__ === false, development-level warning are OFF, performance optimizations are ON
E/ReactNativeJS(31911): Can't find variable: Symbol

[ranyefet]

I've used this polyfill and it fixed my problem:
https://github.com/medikoo/es6-symbol

[ide]

#5294 (comment)

Here's the plan:

1. Import the babel-plugin-symbol-member transform that we have internally: https://gist.github.com/vjeux/2715c9687653547037b0

It just replaces Symbol.iterator with typeof Symbol.iterator === 'function' ? Symbol.iterator : '@@iterator' which makes for..of work. No need to include a 24kb polyfill since the only use case is to have this variable set.

2. Update the JavaScript environment docs to say that we support for..of and mention the existence of this "polyfill". http://facebook.github.io/react-native/docs/javascript-environment.html#content

[zackify]

This happens on android for me too, like @atom992 says.

[zackify]

I'm getting this with for ... of loops, but also when using .includes on an array, which I figured would not be a problem. Went back to indexOf for now.

[brentvatne]

@zackify - want to submit a PR based on the plan that @ide quoted above? :) shouldn't be too hard

[zackify]

@brentvatne I will have to figure out how to add that transform. I will try tomorrow night!

[skevy]

@zackify don't bother...just did some more investigation into that plan...see my comments on #5294 (comment) -- and leave your thoughts if you have anything to add! :)

[babbarankit]

@ide How Do I use this plugin?
I need it urgently. Thanks.

[ide]

@babbarankit it's not super simple if you're not familiar with babel... if this is time-sensitive for you, I recommend hiring a consultant who can help you for this one task

[mkonicek]

Hi there! This issue is being closed because it has been inactive for a while.

But don't worry, it will live on with ProductPains! Check out its new home: https://productpains.com/post/react-native/polyfill-es6-symbol

ProductPains helps the community prioritize the most important issues thanks to its voting feature.
It is easy to use - just login with GitHub. GitHub issues have voting too, nevertheless
Product Pains has been very useful in highlighting the top bugs and feature requests:
https://productpains.com/product/react-native?tab=top

Also, if this issue is a bug, please consider sending a pull request with a fix.
We're a small team and rely on the community for bug fixes of issues that don't affect fb apps.

[afilp]

Hello, this is closed, but is it fixed somehow? Our app fails because we are using the ES2015 "for of" construct.

[maluramichael]

Same here. Our Application crashes on Android because of the for ... of loops.

[jacobp100]

Just import 'core-js' on Android.

[linonetwo]

Why not just automatically import 'core-js' for every Android project?

[satya164]

@linonetwo core-js has a lot of things and it'll slow down the initial load since we've to parse the extra unnecessary stuff now. You should manually import only the things you need from core-js

[joncursi]

The following worked for me:

// index.android.js
import 'core-js/es6/symbol';
import 'core-js/fn/symbol/iterator';

However, this unfortunately caused other issues with other parts of my app.

[jeslabs]

@joncursi by adding this polyfill, the BackHandler subscription works again for me:
import "core-js/es6/set";