Aspnetcore: asm.js fallback not working on IE11

[Daddoon]

Hi,

Since my last update of source code (0.3.0), Blazor don't work anymore on Internet Explorer 11.

Of course i know this is not yet officially supported, but i was able to make it work with babel-core polyfill and fetch.

I don't expect this to be resolved fast, as Internet Explorer 11 is not your goal.
However, here is the Stacktrace i have with Blazor when crashing. I had the same error/issue using other polyfill implementation too.

WASM: Services are configured...
WASM:
WASM: Unhandled Exception:
WASM: Microsoft.AspNetCore.Blazor.Browser.Interop.JavaScriptException: Espace pile insuffisant
WASM: Error: Espace pile insuffisant
WASM: at Symbol()_t.u5o0ubgkph8.set (https://www.gzahra.fr/lib/ie/browser-polyfill/5.6.15/browser-polyfill.min.js:14:262)
WASM: at Symbol()_t.u5o0ubgkph8.set (https://www.gzahra.fr/lib/ie/browser-polyfill/5.6.15/browser-polyfill.min.js:14:262)
WASM: at Symbol()_t.u5o0ubgkph8.set (https://www.gzahra.fr/lib/ie/browser-polyfill/5.6.15/browser-polyfill.min.js:14:262)
WASM: at Symbol()_t.u5o0ubgkph8.set (https://www.gzahra.fr/lib/ie/browser-polyfill/5.6.15/browser-polyfill.min.js:14:262)
WASM: at Symbol()_t.u5o0ubgkph8.set (https://www.gzahra.fr/lib/ie/browser-polyfill/5.6.15/browser-polyfill.min.js:14:262)
WASM: at Symbol()_t.u5o0ubgkph8.set (https://www.gzahra.fr/lib/ie/browser-polyfill/5.6.15/browser-polyfill.min.js:14:262)
WASM: at Symbol()_t.u5o0ubgkph8.set (https://www.gzahra.fr/lib/ie/browser-polyfill/5.6.15/browser-polyfill.min.js:14:262)
WASM: at Symbol()_t.u5o0ubgkph8.set (https://www.gzahra.fr/lib/ie/browser-polyfill/5.6.15/browser-polyfill.min.js:14:262)
WASM: at Symbol()_t.u5o0ubgkph8.set (https://www.gzahra.fr/lib/ie/browser-polyfill/5.6.15/browser-polyfill.min.js:14:262)
WASM: at Symbol()_t.u5o0ubgkph8.set (https://www.gzahra.fr/lib/ie/browser-polyfill/5.6.15/browser-polyfill.min.js:14:262)
WASM: at Microsoft.AspNetCore.Blazor.Browser.Interop.RegisteredFunction.InvokeUnmarshalled[T0,T1,T2,TRes] (System.String identifier, T0 arg0, T1 arg1, T2 arg2) <0x1dfc088 + 0x00056> in :0
WASM: at Microsoft.AspNetCore.Blazor.Browser.Interop.RegisteredFunction.InvokeUnmarshalled[T0,T1,TRes] (System.String identifier, T0 arg0, T1 arg1) <0x1dfbfa0 + 0x00022> in :0
WASM: at Microsoft.AspNetCore.Blazor.Browser.Rendering.BrowserRenderer.UpdateDisplay (Microsoft.AspNetCore.Blazor.Rendering.RenderBatch batch) <0x1dfbeb8 + 0x00020> in :0
WASM: at Microsoft.AspNetCore.Blazor.Rendering.Renderer.ProcessRenderQueue () <0x1bf2c58 + 0x0009e> in :0
WASM: at Microsoft.AspNetCore.Blazor.Rendering.Renderer.AddToRenderQueue (System.Int32 componentId, Microsoft.AspNetCore.Blazor.RenderFragment renderFragment) <0x1befde0 + 0x00080> in :0
WASM: at Microsoft.AspNetCore.Blazor.Components.RenderHandle.Render (Microsoft.AspNetCore.Blazor.RenderFragment renderFragment) <0x1befac0 + 0x00042> in :0
WASM: at Microsoft.AspNetCore.Blazor.Components.BlazorComponent.StateHasChanged () <0x1bef9b0 + 0x00060> in :0
WASM: at Microsoft.AspNetCore.Blazor.Components.BlazorComponent.SetParameters (Microsoft.AspNetCore.Blazor.Components.ParameterCollection parameters) <0x1bef230 + 0x000bc> in :0
WASM: at Microsoft.AspNetCore.Blazor.Browser.Rendering.BrowserRenderer.AddComponent (System.Type componentType, System.String domElementSelector) <0x1bb1778 + 0x0005e> in :0
WASM: at Microsoft.AspNetCore.Blazor.Browser.Rendering.BrowserRenderer.AddComponent[TComponent] (System.String domElementSelector) <0x1bb1468 + 0x00020> in :0
WASM: at Allogaia.Web.Client.Program+d__3.MoveNext () <0x1b9afc8 + 0x00048> in :0
WASM: --- End of stack trace from previous location where exception was thrown ---
WASM: at Allogaia.Web.Client.Program+<>c+<

b__4_0>d.MoveNext () <0x1b95b28 + 0x000bc> in :0
WASM: --- End of stack trace from previous location where exception was thrown ---
WASM: at System.Runtime.CompilerServices.AsyncMethodBuilderCore+<>c.b__6_1 (System.Object state) <0x1e183d8 + 0x00014> in <44d04a8d2b4a4027ae601aa5d288e318>:0
WASM: at System.Threading.QueueUserWorkItemCallback.WaitCallback_Context (System.Object state) <0x1e18388 + 0x00022> in <44d04a8d2b4a4027ae601aa5d288e318>:0
WASM: at System.Threading.ExecutionContext.RunInternal (System.Threading.ExecutionContext executionContext, System.Threading.ContextCallback callback, System.Object state, System.Boolean preserveSyncCtx) <0x1e17ee0 + 0x000f0> in <44d04a8d2b4a4027ae601aa5d288e318>:0
WASM: at System.Threading.ExecutionContext.Run (System.Threading.ExecutionContext executionContext, System.Threading.ContextCallback callback, System.Object state, System.Boolean preserveSyncCtx) <0x1e17b80 + 0x00020> in <44d04a8d2b4a4027ae601aa5d288e318>:0
WASM: at System.Threading.QueueUserWorkItemCallback.System.Threading.IThreadPoolWorkItem.ExecuteWorkItem () <0x1b411f8 + 0x00046> in <44d04a8d2b4a4027ae601aa5d288e318>:0
WASM: at System.Threading.ThreadPoolWorkQueue.Dispatch () <0x1b3f180 + 0x000f4> in <44d04a8d2b4a4027ae601aa5d288e318>:0
WASM: at System.Threading._ThreadPoolWaitCallback.PerformWaitCallback () <0x1b3ed70 + 0x00000> in <44d04a8d2b4a4027ae601aa5d288e318>:0
WASM: [ERROR] FATAL UNHANDLED EXCEPTION: Microsoft.AspNetCore.Blazor.Browser.Interop.JavaScriptException: Espace pile insuffisant
WASM: Error: Espace pile insuffisant
WASM: at Symbol()_t.u5o0ubgkph8.set (https://www.gzahra.fr/lib/ie/browser-polyfill/5.6.15/browser-polyfill.min.js:14:262)
WASM: at Symbol()_t.u5o0ubgkph8.set (https://www.gzahra.fr/lib/ie/browser-polyfill/5.6.15/browser-polyfill.min.js:14:262)
WASM: at Symbol()_t.u5o0ubgkph8.set (https://www.gzahra.fr/lib/ie/browser-polyfill/5.6.15/browser-polyfill.min.js:14:262)
WASM: at Symbol()_t.u5o0ubgkph8.set (https://www.gzahra.fr/lib/ie/browser-polyfill/5.6.15/browser-polyfill.min.js:14:262)
WASM: at Symbol()_t.u5o0ubgkph8.set (https://www.gzahra.fr/lib/ie/browser-polyfill/5.6.15/browser-polyfill.min.js:14:262)
WASM: at Symbol()_t.u5o0ubgkph8.set (https://www.gzahra.fr/lib/ie/browser-polyfill/5.6.15/browser-polyfill.min.js:14:262)
WASM: at Symbol()_t.u5o0ubgkph8.set (https://www.gzahra.fr/lib/ie/browser-polyfill/5.6.15/browser-polyfill.min.js:14:262)
WASM: at Symbol()_t.u5o0ubgkph8.set (https://www.gzahra.fr/lib/ie/browser-polyfill/5.6.15/browser-polyfill.min.js:14:262)
WASM: at Symbol()_t.u5o0ubgkph8.set (https://www.gzahra.fr/lib/ie/browser-polyfill/5.6.15/browser-polyfill.min.js:14:262)
WASM: at Symbol()_t.u5o0ubgkph8.set (https://www.gzahra.fr/lib/ie/browser-polyfill/5.6.15/browser-polyfill.min.js:14:262)
WASM: at Microsoft.AspNetCore.Blazor.Browser.Interop.RegisteredFunction.InvokeUnmarshalled[T0,T1,T2,TRes] (System.String identifier, T0 arg0, T1 arg1, T2 arg2) <0x1dfc088 + 0x00056> in :0
WASM: at Microsoft.AspNetCore.Blazor.Browser.Interop.RegisteredFunction.InvokeUnmarshalled[T0,T1,TRes] (System.String identifier, T0 arg0, T1 arg1) <0x1dfbfa0 + 0x00022> in :0
WASM: at Microsoft.AspNetCore.Blazor.Browser.Rendering.BrowserRenderer.UpdateDisplay (Microsoft.AspNetCore.Blazor.Rendering.RenderBatch batch) <0x1dfbeb8 + 0x00020> in :0
WASM: at Microsoft.AspNetCore.Blazor.Rendering.Renderer.ProcessRenderQueue () <0x1bf2c58 + 0x0009e> in :0
WASM: at Microsoft.AspNetCore.Blazor.Rendering.Renderer.AddToRenderQueue (System.Int32 componentId, Microsoft.AspNetCore.Blazor.RenderFragment renderFragment) <0x1befde0 + 0x00080> in :0
WASM: at Microsoft.AspNetCore.Blazor.Components.RenderHandle.Render (Microsoft.AspNetCore.Blazor.RenderFragment renderFragment) <0x1befac0 + 0x00042> in :0
WASM: at Microsoft.AspNetCore.Blazor.Components.BlazorComponent.StateHasChanged () <0x1bef9b0 + 0x00060> in :0
WASM: at Microsoft.AspNetCore.Blazor.Components.BlazorComponent.SetParameters (Microsoft.AspNetCore.Blazor.Components.ParameterCollection parameters) <0x1bef230 + 0x000bc> in :0
WASM: at Microsoft.AspNetCore.Blazor.Browser.Rendering.BrowserRenderer.AddComponent (System.Type componentType, System.String domElementSelector) <0x1bb1778 + 0x0005e> in :0
WASM: at Microsoft.AspNetCore.Blazor.Browser.Rendering.BrowserRenderer.AddComponent[TComponent] (System.String domElementSelector) <0x1bb1468 + 0x00020> in :0
WASM: at Allogaia.Web.Client.Program+d__3.MoveNext () <0x1b9afc8 + 0x00048> in :0
WASM: --- End of stack trace from previous location where exception was thrown ---
WASM: at Allogaia.Web.Client.Program+<>c+<

b__4_0>d.MoveNext () <0x1b95b28 + 0x000bc> in :0
WASM: --- End of stack trace from previous location where exception was thrown ---
WASM: at System.Runtime.CompilerServices.AsyncMethodBuilderCore+<>c.b__6_1 (System.Object state) <0x1e183d8 + 0x00014> in <44d04a8d2b4a4027ae601aa5d288e318>:0
WASM: at System.Threading.QueueUserWorkItemCallback.WaitCallback_Context (System.Object state) <0x1e18388 + 0x00022> in <44d04a8d2b4a4027ae601aa5d288e318>:0
WASM: at System.Threading.ExecutionContext.RunInternal (System.Threading.ExecutionContext executionContext, System.Threading.ContextCallback callback, System.Object state, System.Boolean preserveSyncCtx) <0x1e17ee0 + 0x000f0> in <44d04a8d2b4a4027ae601aa5d288e318>:0
WASM: at System.Threading.ExecutionContext.Run (System.Threading.ExecutionContext executionContext, System.Threading.ContextCallback callback, System.Object state, System.Boolean preserveSyncCtx) <0x1e17b80 + 0x00020> in <44d04a8d2b4a4027ae601aa5d288e318>:0
WASM: at System.Threading.QueueUserWorkItemCallback.System.Threading.IThreadPoolWorkItem.ExecuteWorkItem () <0x1b411f8 + 0x00046> in <44d04a8d2b4a4027ae601aa5d288e318>:0
WASM: at System.Threading.ThreadPoolWorkQueue.Dispatch () <0x1b3f180 + 0x000f4> in <44d04a8d2b4a4027ae601aa5d288e318>:0
WASM: at System.Threading._ThreadPoolWaitCallback.PerformWaitCallback () <0x1b3ed70 + 0x00000> in <44d04a8d2b4a4027ae601aa5d288e318>:0
SCRIPT5022: ExitStatus: Program terminated with exit(255)
mono.js (1,268)

At first sight, i look like a Stackoverflow to me, somehow only occuring on Internet Explorer 11.

[floreseken]

IE 11 is not supported atm

[Daddoon]

...As stated at the top of my post ?

I know, but i thought it would be useful to report this error, as i was able to run my app on the previous official build.

I don't expect a resolution atm

[SteveSandersonMS]

You're correct that we're not prioritising IE11-specific issues, as it's undecided whether it will be a supported target. However if we are eventually going to investigate this, would you be able to post repro steps (i.e., how to create a new project and add the minimum polyfills necessary to get it failing at this point)?

[Daddoon]

I will try to send you a working and failing repro project, with the minimum polyfills.

[SteveSandersonMS]

@Daddoon Instead of sending a project, could you please simply write the steps to convert a clean new project into a repro? For example, "1. Add the following polyfill script tag to index.html: <script..."... Thanks.

[Daddoon]

Alright !

Here the steps:

1. Creating a new project with the following commands:

dotnet new -i Microsoft.AspNetCore.Blazor.Templates
dotnet new blazor -o BlazorApp1
cd BlazorApp1
dotnet run

1. Calling dotnet run, then connecting to the given URL:

• Chome: OK!
• Internet Explorer 11: KO !

1. Opening index.html:

• Adding this appPreroutine "onload" method on Body tag for lack of document.baseURI on IE11
• Adding browser-polyfill from babel-core (5.8.38) and fetch (2.0.3)

The code should look like this:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>BlazorApp1</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/site.css" rel="stylesheet" />
</head>
<body onload="appPreroutine()">
    <app>Loading...</app>

    <script>
        function appPreroutine() {
            if (/MSIE \d|Trident.*rv:/.test(navigator.userAgent)) {
                //Additional checks for Internet Explorer"
                if (document.baseURI == null || document.baseURI == undefined) {
                    //IE case
                    var port = "";
                    if (location.port != undefined && location.port != null && location.port != "")
                        port = ":" + location.port;

                    document.baseURI = location.protocol + "//" + location.hostname + port + "/";
                }
            }
        }
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser-polyfill.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.js"></script>
    <script src="css/bootstrap/bootstrap-native.min.js"></script>
    <script type="blazor-boot"></script>
</body>
</html>

1. Calling dotnet run, then connecting to the given URL:

• Chome: OK!
• Internet Explorer 11: OK !

1. Updating NuGet packages on project to 0.3.0-preview1 (i don't know the exact build), from NuGet packages generated via sources.

2. Rebuild...

3. Calling dotnet run, then connecting to the given URL:

• Chome: OK!
• Internet Explorer 11: KO !

Conclusion:

• Working on IE11 with given changes with Blazor 0.2.1
• Failing on IE11 with given changes with Blazor 0.3.0-preview1

[SteveSandersonMS]

Thanks @Daddoon, that's very helpful.

[Daddoon]

I actually found the possible caveat after a lot of research, and a fix.

I will try to PR something tomorrow, and at the same, try to add required polyfill in the Browser.JS projecT.

[SteveSandersonMS]

Great! Any info you can give on the cause and resolution would be really useful.

Please note that we are not planning to include polyfills directly in the Blazor.JS project at this stage, but information about what you think we should suggest people use would be valuable.

[Daddoon]

Hi @SteveSandersonMS ,

I have made my own repository and release for the polyfill fix.
You can see it here.

Actually, the problem is with the polyfills (and Internet Explorer 11 of course), and it occur with babel / core-js and other compatible polyfills.

It seem that IE11 have some difficulties with deep setter recursion on Symbol, and it get a Stack memory exceeded error.

core-js actually implement a workaround with setters (useSimple), and IE11 seem to not throw anymore if using the option instead of the full setter implementation.

So in this scenario, setter is maybe not totally compliant, but it prevent the crash.

My library actually set the polyfills to useSimple if Internet Explorer is detected at start. Otherwise, it include polyfills, but doesn't change the default behavior if it's not Internet Explorer.

[Daddoon]

I just forgot to add the document.baseURI overload, i will try to fix this shortly.

EDIT: Done.