IE11 returns a blank page about fable-react HOT 12 OPEN

After a lot of debugging it seems the problem comes from polyfill.io as their Array.from replacement is not working properly in IE11 for some reason. If you remove this line in the HTML, and replace it with the following, it should work:

<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.5.3/core.min.js"></script>

<!-- This is only necessary if your app uses `fetch` -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.min.js"></script>

Could you please check and confirm if the solution works for you?

from fable-react.

I can confirm that by using your polyfill suggestion everything works!
Sadly default doesn't work.

from fable-react.

Unfortunately I don't know what's the problem exactly but maybe we can report an issue so they're aware of it.

from fable-react.

It seems it's already been reported: https://github.com/Financial-Times/polyfill-service/issues/1434

from fable-react.

Thanks! I actually had the same problem in one of my projects and was investigating this. You saved a lot of time :) I'll try to release a fix as soon as possible 👍

from fable-react.

I think some people reported that by using default in the polyfill setting problems where solve for IE11:

<script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,fetch"></script>

I am not sure about that, and don't have access to an IE11 browser to test it.

from fable-react.

I wonder why Array.from is causing troubles.
I'm using Array.from from polyfill.io in another project (written in TypeScript) and the project runs in IE11 flawlessly.

from fable-react.

Maybe it's not Array.from by itself but a combination of that and Iterables. In Fable 1 lists are implemented using a custom List class that contains the [Symbol.iterator]. This is converted fine to an array in Chrome & friends, but apparently polyfill.io doesn't give enough juice to IE11 to perform this operation ¯_(ツ)_/¯

from fable-react.

Should I close the issue?
The dotnet new template uses still polyfill.io I guess, so people using that as a starting point are having the same issues...

from fable-react.

can we please fix the templates then? care to send a PR?

from fable-react.

The problem we have right now with the templates is there's a lot of fragmentation, we can "fix" this in the simple template but then there's the elmish template, the fulma template, SAFE template, etc. We need to find an easy way to propagate these changes through several places, which has been discussed in several places but I'm not sure yet which is the best solution. Probably putting scripts and related files in an npm package and make templates download it (there's an attempt for that in the fable-scripts repo).

We also need to decide if we want to recommend adding the polyfill with a script tag (as seen above) or importing them in code as in the SAFE bookstore.

from fable-react.

The polyfills of polyfill.io are hosted on GitHub, if we know which part causes this maybe we can fix it in polyfill.io?

https://github.com/Financial-Times/polyfill-service/blob/master/polyfills/Array/from/polyfill.js

from fable-react.