react-universally icon indicating copy to clipboard operation
react-universally copied to clipboard

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

Open bost-h opened this issue 7 years ago • 5 comments

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 :(

bost-h avatar Aug 02 '17 09:08 bost-h

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

ctrlplusb avatar Aug 02 '17 09:08 ctrlplusb

@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

diondirza avatar Aug 02 '17 10:08 diondirza

thanks @diondirza

sergiokopplin avatar Aug 02 '17 13:08 sergiokopplin

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 !

bost-h avatar Aug 02 '17 18:08 bost-h

Brilliant! Just saved my bacon. Thanks!

mschipperheyn avatar Sep 11 '17 20:09 mschipperheyn