ctrlplusb / react-universally

A starter kit for universal react applications.
MIT License
1.7k stars 244 forks source link

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

Open bost-h opened 7 years ago

bost-h commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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

thanks @diondirza

bost-h commented 7 years ago

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 commented 7 years ago

Brilliant! Just saved my bacon. Thanks!