List.toArray broken in IE11

[SCullman]

Description

["A"] |> List.toArray returns [||] in IE11.

I expect that it is not realy a fable bug, however I am not able to identify a minimum polyfill.
https://cdn.polyfill.io/v2/polyfill.js?features=es6,fetch or ..,default is not enough.

It works if I install and configure the complete @babel/polyfill.

Related information

• Fable version: 2.0.11

[inosik]

This code fails in the REPL in Chromium:

let xs = ["A"] |> List.toArray
printfn "%i" (Array.length xs)

Uncaught SyntaxError: The requested module 'https://fable.io/repl/js/repl/fable-core/Types.js' does not provide an export named 'L'

Maybe it's worth noting that Fable doesn't optimize the creation of the list and the call to List.toArray. This code works fine:

let xs = List.toArray ["A"]
printfn "%i" (Array.length xs)

[SCullman]

Well, I tested this in Chrome, Edge and IE: Comments show the results in IE11.
I already loaded these polyfills:
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=es6,fetch"/>

// returns 0; expected 2
["A";"B"] |> List.toArray |> Array.length |> printfn "%i"

// returns 2 (correct)
["A";"B"] |> Seq.toArray |> Array.length |> printfn "%i"  

 // returns 2 (correct)
[|"A";"B"|] |> Seq.toArray |> Seq.length |> printfn "%i"  

// throws exn (Object doesn't support method ".from") 
[|1;2|] |> Seq.toArray |> Seq.length |> printfn "%i"   

I stumpled upon when Thot.Json was not able to Decode fetch results (containing Lists) in Internet Explorer. I already know that finally List.toArray turns into a call to ".from" .
Looks like I am missing an essential polyfill or polyfill.io returns a not working one.

Please note also that the REPL isn't working at all for IE11, which I don't see as important.

[inosik]

You're right, this seems to be an unrelated bug in the REPL.

[alfonsogarciacaro]

I think this is related to fable-compiler/fable-react#59

Array.from seems to be buggy in polyfill.io: https://github.com/Financial-Times/polyfill-service/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+array.from+

Can you please try with core-js or @babel/polyfill adding them to your entry in webpack.config.js?

[SCullman]

@babel/polyfill works, but is adding about 80k to the bundle.
You are right, both issues have the same cause.

[alfonsogarciacaro]

Yeah, I know :/ Are you using "useBuiltIns": "usage" in your Babel config? Maybe core-js

polyfill.io is very convenient but if it's not working correctly it's not really an option. Maybe there's a way to load the polyfill lazily.

[SCullman]

I am not yet using "useBuiltIns": "usage", but looks like that it it is exactly what I am looking for my comfort. However, isn't your linked webpack.config in contradiction to the docs?

If useBuiltIns: 'usage' is specified in .babelrc then do not include @babel/polyfill in either webpack.config.js entry array nor source. Note, @babel/polyfill still needs to be installed.

[alfonsogarciacaro]

Oh, didn't know that 😮 Thanks for pointing it out! I'm always confused by the babel env options 😅

Another possibility that may work: including only the core-js polyfill for array.from and keep using polyfill.io for the rest.

[alfonsogarciacaro]

Hmm, I'm rereading the docs and it seems it's still necessary to include import "babel-polyfill" manually (which is the same as adding the entry in webpack.config.js). The useBuiltIns option will just transform that import into individual imports, but it won't add it automatically. See for example this: https://www.npmjs.com/package/babel-preset-env#usebuiltins

[chadunit]

It looks to me like that is outdated doc with only true/false for the setting. The note about including it once now seems to be only for entry, not usage, in this doc: https://babeljs.io/docs/en/babel-preset-env#usebuiltins

[alfonsogarciacaro]

You're right, thank you! I've updated the webpack-config-template 👍

[alfonsogarciacaro]

@SCullman I'll close this as this is actually not an issue with Fable, but please feel free to reopen or comment again if you've other questions :)