facebook/react-native

Polyfill ES6 Symbol

atom992 opened this issue · 27 comments

atom992 commented

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 commented

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 commented

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

DanielHoffmann commented

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

skevy commented

@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 commented

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 commented

any update?

skevy commented

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 commented

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 commented

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 commented

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

  • 🎉1
ide commented

#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.

  1. 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 commented

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

zackify commented

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 commented

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

zackify commented

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

skevy commented

@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 commented

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

ide commented

@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 commented

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 commented

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

  • 👍6
maluramichael commented

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

  • 👍11
jacobp100 commented

Just import 'core-js' on Android.

  • 👍6
linonetwo commented

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

satya164 commented

@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

  • 👍1
joncursi commented

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.

  • 👍4
jeslabs commented

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

  • 👍6