Unexpected Syntax Error in blazor.webview.js on iOS lower than v17 in .NET 9 Pre7

[mhrastegari]

Description

We're trying to update our projects and templates to the .NET. 9 preview 7 but in iOS version of our app on devices with OS versions lower than 17 not working!

Steps to Reproduce

1. Create a new .NET MAUI Blazor app using .NET CLI
2. Run it on iOS versions lower than 17

Link to public reproduction project repository

https://github.com/mhrastegari/BlazorIssueWithOldIosVersions

Version with bug

9.0.0-preview.7.24407.4

Is this a regression from previous behavior?

Yes, this used to work in .NET MAUI

Last version that worked well

8.0.80 SR8

Affected platforms

iOS

Affected platform versions

Tested on iOS 16 & iOS 15

Did you find any workaround?

No

Relevant log output

SyntaxError: Unexpected token '{'
If (anonymous function) — blazor.webview.js:1
ReferenceError: Can't find variable: Blazor
Global Code - user-script:1:15

Screenshots

Working on iOS 17 but not 16:

[Eilon]

Thanks for the report we will investigate!

[Eilon]

@javiercn / @SteveSandersonMS / @MackinnonBuck - thoughts on this?

We've had issues in the past where a change in Blazor caused an issue on older web views:

• [.NET 9] BlazorWebView fails to load on older Android devices Uncaught SyntaxError: Unexpected token . aspnetcore#53699
• Net.Maui Blazor not running on Android 7.1 Tablet  aspnetcore#39086

I'm not sure if this is a case of:

1. Blazor maybe generally has an issue on these versions of iOS?
2. Blazor's WebView JS code has an issue specifically on these versions of iOS?

I know in general Blazor supports only the 'latest browser' but this scenario might be a bit different because it's probably the latest WebKit/Gecko/Safari for that OS?

[Eilon]

I tried .NET 9 Preview 7 with a Blazor Web app and that works fine on iOS 16.4.

[MackinnonBuck]

Hm, this probably needs investigating.

@mhrastegari, do the dev tools point to a specific location in blazor.webview.js failing? Also, are you able to see the content returned by the browser's request to blazor.webview.js? I'm wondering if either:

1. The request to blazor.webview.js is returning something other than the actual script (e.g., JSON)
2. We're using a JS feature not supported by older browsers

[MackinnonBuck]

We received a similar report of this in dotnet/aspnetcore#57326

[Eilon]

@MackinnonBuck I'm trying to repro locally but it's taking a while to get my Mac set up for .NET 9 Preview 7.

The other report is interesting because it seems to imply it's an issue with all the Blazor JS files... I couldn't repro that in my quick test earlier.

[MackinnonBuck]

@Eilon Interesting. So it is probably an issue with the script itself then (not with fetching the script).

[MackinnonBuck]

Well, wait. I spoke to soon. The screenshot in that other issue shows blazor.webview.js. It might be that "blazor.web.js" in the issue title is a typo.

[MackinnonBuck]

So maybe the problem does only happen for blazor.webview.js.

[ninachen03]

This issue has been verified using latest Visual Studio 17.12.0 Preview 1.0 (9.0.0-preview.7.24407.4). Can repro on iOS platform. works fine on 17.12.0 Preview 1.0 (8.0.80)

[jlbeard84]

This issue essentially makes .net 9 a non starter for us. We're currently in the process of upgrading our app from Xamarin Forms to Maui/BlazorHybrid and we have the need to support a wide range of devices. It seems crazy to me that a breaking change like this is just introduced with no warning and no resolution in sight. It gives me pause and makes me wonder how long we'll be stuck on .net 8.

[grumpymonk]

Also just ran into this. .NET MAUI 8 worked; after an upgrade to 9, it immediately stopped working on the same app, with the errors noted above. This can't possibly be a ".NET 10 Planning" issue -- I have nothing against iOS 17, but given that iOS 18 just came out, .NET 9 should at least be fully backwards compatible with iOS 16, if not also the later versions of iOS 15. Plenty of business users can't update to the latest few versions on their devices for various reasons. Please bump this up to recompile at least the Blazor-MAUI JS dependencies on ES2019 (again) as opposed to ES2022. Either that, or provide a documented workaround.

[vitash]

Not even ios 16 is supported, which is exactly the phone I'm currently using. Android's API 31, which was also released in October 2021, just doesn't work to use for those who don't update their systems. It's almost unacceptable for Maui to require users to use a new device

[jlbeard84]

@samhouts @MackinnonBuck Is there any resolution for this in sight? .NET 8 is leaving support for Maui in less than 6 months at this point and having no resolution plan for this is putting us in a tight spot.

[ghhv]

boo.. just came across this too.. blank screen loading Blazor 9 web page (not MAUI Blazor) in Safari (and Chrome) on iPad Mini 4 with iOS 15.8.3

Worked previously when the app was Blazor 8.. how do I tell the client he has to upgrade all the company iPads now.. ?

I don't have a Mac to see more in developer info..

[ghhv]

boo.. just came across this too.. blank screen loading Blazor 9 web page in Safari (and Chrome) on iPad Mini 4 with iOS 15.8.3

Worked previously when the app was Blazor 8.. how do I tell the client he has to upgrade all the company iPads now.. ?

I don't have a Mac to see more in developer info..

OK, I have a Mac now.. can confirm same Unexpected token error as @mhrastegari in Safari.

[ghhv]

The Github Copilot answer:

The error Uncaught SyntaxError: Unexpected token . in older browsers is likely caused by the optional chaining operator (?.), which is not supported in those browsers.

To make the code compatible with older browsers, you can replace the optional chaining operator with a more traditional approach:

export function getBrowserEventName(possibleAliasEventName: string): string {
  const eventOptions = eventTypeRegistry.get(possibleAliasEventName);
  return eventOptions && eventOptions.browserEventName ? eventOptions.browserEventName : possibleAliasEventName;
}

[smmaya]

Gosh, I wasted a week on this bs ;)
Works on a simulator (iPhone 16) but not on my real device (15.8.3) - what to do, revert back to .NET8 or try the preview?

[Ed156]

Two full weeks wasted here... at least I know now it's a known problem. My user base certainly has v16 among them and the update must go live soon. What to do?

For me it is reproducable on a device and simulator running ios 15.

[ghhv]

@smmaya @Ed156 this has been ongoing and worsening issue since at least 2021 and and they have refused to fix in the past...

I haven't tried it but this fix might be an option - dotnet/aspnetcore#53699

The issue seems to stem from updated build/package changes e.g. #4517 and dotnet/aspnetcore#53699

They really need to at least add the graceful fail and a message to know what is going on as mentioned before e.g. dotnet/aspnetcore#53699

I also wasted way too much time on this..

At least on Android, you could possibly update WebView with an old OS but Apple doesn't support devices beyond ~7 years old..

[Eilon]

Hi everyone, I've posted a step-by-step guide on how to work around this issue by using an ES2019-compatible version of blazor.webview.js: #27327

If you're running into the problem described in this issue, please try that out and let us know if the workaround is working for you.

[ghhv]

@Eilon thanks very much for looking into this. I'm guessing you also need to do a version of this for the blazor.web.js file to resolve with Safari regular browser page view? I did quickly test and it gets the following loading the modified webview.
info: Microsoft.AspNetCore.Hosting.Diagnostics[16] Request reached the end of the middleware pipeline without being handled by application code. Request path: GET https://app.com/_framework/blazor.modules.json, Response status code: 404

[Ed156]

@Eilon thank you!! I tested my Maui Blazor Hybrid app with your fix. It works now on various iOS emulators that surely did not work without it.

Would you consider this fix safe for deployment?