IE11 returns a blank page

[toburger]

When the children of a react element are coming from another function IE11 renders a blank page.

let returnList =
    [ R.str "hello1"
      R.str "hello2" ]

let app = R.div [] returnList

This is a minimal example which returns a blank page on IE11.
The error log is empty, so it is very obscure what's happening here.

All other browsers I've tested (Chrome, Firefox, Edge) return the children as expected.

I've created a repo with the code: https://github.com/toburger/fable-react-ie11-minimal-repo

[alfonsogarciacaro]

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 👍

[alfonsogarciacaro]

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?

[MangelMaxime]

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.

[toburger]

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

[toburger]

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.

[alfonsogarciacaro]

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 ¯_(ツ)_/¯

[toburger]

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

[forki]

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

[alfonsogarciacaro]

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.

[zaaack]

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

[alfonsogarciacaro]

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

[alfonsogarciacaro]

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