iPhone 13 Issue

[Mike-E-angelo]

I am launching a product today, and one of the sweeps I am doing is iPhone/Safari. To my surprise/delight, everything pretty much seems to work, but I am running into problems it appears with iPhone 11 Pro Max 13 and iPhone 11 Pro 13

Here is the error reported:

Microsoft.JSInterop.JSException: mq.addEventListener is not a function. (In 'mq.addEventListener('change', mediaQueryList.dotnetCallback)', 'mq.addEventListener' is undefined)
addMediaQueryToList@https://alpha.starbeam.one/_content/BlazorPro.BlazorSize/blazorSizeMedia.js:28:28
addMediaQueryToList@[native code]
https://alpha.starbeam.one/_framework/blazor.server.js:1:3506
initializePromise@[native code]
Promise@[native code]
beginInvokeJSFromDotNet@https://alpha.starbeam.one/_framework/blazor.server.js:1:3486
forEach@[native code]
_invokeClientMethod@https://alpha.starbeam.one/_framework/blazor.server.js:1:71766
_processIncomingData@https://alpha.starbeam.one/_framework/blazor.server.js:1:69820
https://alpha.starbeam.one/_framework/blazor.server.js:1:48526
   at async ValueTask<TValue> Microsoft.JSInterop.JSRuntime.InvokeAsync<TValue>(long targetInstanceId, string identifier, object[] args)
   at async Task BlazorPro.BlazorSize.MediaQueryService.Initialize(MediaQuery mediaQuery)
   at async Task BlazorPro.BlazorSize.MediaQueryList.Initialize(MediaQuery mediaQuery)
   at async Task BlazorPro.BlazorSize.MediaQuery.OnAfterRenderAsync(bool firstRender)
   at async Task Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

Incidentally, I am seeing errors like this with my own JS calls. It seems as if JavaScript is not loaded/ready. It is intermittent and rare, but still concerning. I wonder if it's related? Example of another issue similar, but unrelated to BlazorSize:

Microsoft.JSInterop.JSException: bootstrap is not defined
ReferenceError: bootstrap is not defined
    at eval (eval at <anonymous> (https://server-starbeam-one-gateway.azurewebsites.net/_framework/blazor.server.js:1:3501), <anonymous>:1:1)
    at eval (<anonymous>)
    at https://server-starbeam-one-gateway.azurewebsites.net/_framework/blazor.server.js:1:3501
    at new Promise (<anonymous>)
    at Tt.beginInvokeJSFromDotNet (https://server-starbeam-one-gateway.azurewebsites.net/_framework/blazor.server.js:1:3475)
    at https://server-starbeam-one-gateway.azurewebsites.net/_framework/blazor.server.js:1:71773
    at Array.forEach (<anonymous>)
    at Tt._invokeClientMethod (https://server-starbeam-one-gateway.azurewebsites.net/_framework/blazor.server.js:1:71759)
    at Tt._processIncomingData (https://server-starbeam-one-gateway.azurewebsites.net/_framework/blazor.server.js:1:69801)
    at bt.Tt.connection.onreceive (https://server-starbeam-one-gateway.azurewebsites.net/_framework/blazor.server.js:1:64201)
   at async ValueTask<TValue> Microsoft.JSInterop.JSRuntime.InvokeAsync<TValue>(long targetInstanceId, string identifier, object[] args)
   at async ValueTask Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, string identifier, params object[] args)
   at async Task DragonSpark.Presentation.Components.Evaluate.OnAfterRenderAsync(bool firstRender) in D:/a/1/s/Framework/DragonSpark.Presentation/Components/Evaluate.razor:line 30
   at async Task Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

FWIW I am using BrowserStack to try this (which is really super amazing): https://live.browserstack.com/dashboard

If you are able to load up a device, the address where this fails is one of the following: https://alpha.starbeam.one/market/products https://alpha.starbeam.one/market/publishers

Btw, I have this project listed in my acknowledgments. Thank you for all the great work over there. 🙏

[EdCharbeneau]

I reached out to the .NET team on this one. Here's their response.

If the Blazor code tries to call those other libraries synchronously it will fail. You should either put the other libraries first in the source code, or you should use Blazor’s autostart=false option to avoid initializing the Blazor application code until the other required scripts have loaded.

[Mike-E-angelo]

Wow thank you for looking into this and I admit it's a bit of a knuckleball here in that it is an edge case. That totally makes sense to me, and my only apprehension here is that I wish that this occurred with other browser versions/OS's as well so that I can catch this type of issue way before having to resort to BrowserStack.

I have went ahead and have moved <script src="~/_framework/blazor.server.js"></script> as the last script tag in the document. From what I understand that is what is being asked here. It still all works on my machine, so nothing has changed in that regard. As I am out of free minutes with BrowserStack, I will have to assume that it is fixed there until I see something in the logs.

Thank you again for looking into this and for the great work/product there. 👍