[Blazor] .NET 9 generated JS uses high version syntax leading to compatibility issues

[capdiem]

Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

The blazor.*.js files generated by .NET 9 utilize the static initialization block feature introduced in ES2022. This usage causes compatibility issues on lower-end devices and older browsers.
You can find instances of this issue by searching for static{ in the generated files.

static{this.nextEventDelegatorId=0}

related issue: dotnet/maui#24278 dotnet/maui#25862

Expected Behavior

Regenerate using ES2019(.NET 8) as the target, just like before.

Steps To Reproduce

No response

Exceptions (if any)

No response

.NET Version

net9.0

Anything else?

No response

[danroth27]

Our official support policy is that we only support the latest browser versions. Since most users automatically update their browser, we find this isn't generally an issue. When setting up test devices, we recommend similarly updating the browser/webview to emulate this common user behavior.

[capdiem]

@danroth27 While it's true that most users automatically update their browsers, not all users are accustomed to doing so. Setting the tsconfig target to a version as high as ES2022 can lead to compatibility issues, especially considering that .NET 8 targets ES2019.

For a framework with such a large user base, backward compatibility is crucial. Many popular JavaScript libraries set their minimum support to ES2015, and I believe that for Blazor, targeting ES2019 would be a more reasonable approach. This change would help prevent any breaking updates when upgrading to .NET 9.

Thank you for your reply!

[nieuwveen]

The majority of our user base does not have access to the latest mobile devices.
Now use a custom version of blazor.web.js that ensures greater compatibility.
Create your own custom version of blazor.web.js, with Babel.js

[danroth27]

The majority of our user base does not have access to the latest mobile devices.

@nieuwveen That's certainly true, but even older devices can still get browser updates. So even if the user has an older phone, often they will still have an updated browser that can run Blazor apps. Most often we hear about users hitting problems testing with emulated devices for older Android versions that haven't been similarly updated. But if you're instead hitting problems with users using your deployed Blazor app on an actual device, please do let us know!

Now use a custom version of blazor.web.js that ensures greater compatibility.

This is certainly an option for those who are able to take on this additional responsibility. Obviously, we can't make any claims how well this will work because it's not a scenario we test and directly support.

[capdiem]

@danroth27 It's not just the emulator, we have physical testing devices for various Android versions, and we encounter these issues on devices running below Android 12, as I have already pointed out. While I can certainly clone this project and manually compile the blazor.*.js targeting ES2018, that is not a solution that works for everyone.

Related issues: #57326 dotnet/maui#24278

[nieuwveen]

@danroth27 You are right that older phones still receive updates, but not every user installs them. Sometimes there isn’t enough space to install them, or users may not know about the updates.
Perhaps we need something to show a message to the users that their device needs an update.
We’ve received multiple reports of iPhones that have problems, after installing the latest IOS the problem is fixed

[mobinseven]

Dear @danroth27, there are many people who are still using iOS 15 phones (because Apple has not proposed anything new for years, and it seems logical that users haven't felt compelled to upgrade their devices). And yes, we will be hitting problems with them if we start to ship our products in dotnet9. And imposing a .NET official support policy on them does not seem very nice.

I personally have a great amount of respect for you, @javiercn, and your team's professional and valuable efforts for the .NET community, and we understand that keeping up with new waves of technology while maintaining compatibility is a very complex and challenging task. Thank you.

[LuohuaRain]

Dear @danroth27 I hope this issue can be reopened because after upgrading to .NET 9, I have received a large amount of feedback from customers that the page cannot be opened. After several days of troubleshooting, I found that the issue is the same as the poster's problem, as shown in the image below:

When blazor.web.js is rendered using InteractiveServer or dynamically switching rendering modes, the page becomes completely blank. Upgrading to .NET 9 has caused numerous compatibility issues, and customers cannot upgrade the underlying dependencies of WebView (because it is built on another major platform). Therefore, I hope there can be a corresponding solution to better handle compatibility issues. Thank you.

[jlbeard84]

But if you're instead hitting problems with users using your deployed Blazor app on an actual device, please do let us know!

@danroth27 We are certainly hitting this on physical devices. In our case it's a Blazor Hybrid Maui app, which you can see comments referenced for at #57326 or dotnet/maui#24278

We're stuck on .net 8 until there is some resolution in sight for this, because with our use case we have devices all around the world that need to be supported. Very few of these are on the latest browsers.

[hughesjs]

Surely if this is simply the case of a target version for a transpiler, you just add this as a config option in the csproj?

We've just found ~10% of our users are on iOS < 17. A lot of our users will be non-tech savvy people, who won't have any idea how to update their phone.

[rabberbock]

This is what I have in my Dockerfile build which seems to be working fine.

RUN npx esbuild /app/wwwroot/_framework/blazor.webassembly.js \
        --outfile=/app/wwwroot/_framework/blazor.webassembly.js \
        --target=es2019 \
        --allow-overwrite