Skip to content
This repository has been archived by the owner on Jun 3, 2019. It is now read-only.

TypeError: iterable[Symbol.iterator] is not a function #480

Open
bost-h opened this issue Aug 2, 2017 · 5 comments
Open

TypeError: iterable[Symbol.iterator] is not a function #480

bost-h opened this issue Aug 2, 2017 · 5 comments

Comments

@bost-h
Copy link

bost-h commented Aug 2, 2017

Hello,

I have a strange issue so here I am. I'm not sure yet if it's relative to react-universally setup, async-component/tree-walker or just polyfill.io.

I reproduced it using react-universally master : When I navigate to localhost:1337 with my chrome browser using the responsive mode for an apple device, I get an error which breaks the rendering :

Uncaught (in promise) TypeError: iterable[Symbol.iterator] is not a function
    at index.js:25
    at Promise (<anonymous>)
    at pReduce (index.js:24)
    at pMapSeries (index.js:51)
    at doTraverse (index.js:91)
    at doVisit (index.js:116)
    at index.js:142
    at Promise (<anonymous>)
    at reactTreeWalker (index.js:70)
    at asyncBootstrapper (index.js:22)

It only happens when I activated the responsive mode before I navigate to the app. If I enable the responsive mode after the initial render, there is no error. That make me think it is related to polyfill.io but maybe we can work around this.

This is reproduced on react-universally master branch, using chrome 59.0.3071.115 responsive mode for all apple devices (iphone5, iphone6, iphone6+, ipad, ipad pro). Also, i use macOS 10.12.6.

I have no physical Apple device so I can't test if this happens on real devices, that would make me sad :(

@ctrlplusb
Copy link
Owner

Hmmm, interesting. Wonder if this is a behaviour issue with polyfill.io.

TBH we have had quite a few polyfill related issues. My opinion is beginning to lean towards using babel-present-env powered polyfilling. Yes, you may get more than you, but it is generally less flaky. We could comment the code accordingly describing an opportunity to optimise your polyfills using polyfill.io.

Appreciate the thoughts of the other collaborators on this one. 👍

@diondirza
Copy link
Contributor

diondirza commented Aug 2, 2017

@bost-h you can append this query in your polyfill.io src &flags=gated,always, this will solve issue both in IE and Apple device. So it will be like this:

https://cdn.polyfill.io/v2/polyfill.min.js?features=default,es6&flags=gated,always

@sergiokopplin
Copy link
Collaborator

thanks @diondirza

@bost-h
Copy link
Author

bost-h commented Aug 2, 2017

Great, thank you @diondirza !

@ctrlplusb I let you close this issue, I don't know if you want to discuss if this should be implemented by default in react-universally, but @diondirza answer did the job for me.

Thanks guys !

@mschipperheyn
Copy link

Brilliant! Just saved my bacon. Thanks!

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants