blazor.server.js SyntaxError: Unexpected token '{' in Safari Version 16.3. with a Mac Studio using Ventura 13.2

[julianadormon]

URL(s)

https://jbordeauxphotography.proofpix.com/roseville-high-2024/

Description

Long story short, I went into production with .net9 RC1 after much testing (I know, I know).

I then started getting complaints from a few Safari users that their websites were not loading all the content. Upon reviewing their site on their system, there was no WebSocket connection being opened. We run blazor server for them.

The console reports: blazor.server.js SyntaxError: Unexpected token '{'

They were not having any problems until I upgraded from .net 8.

I have no problems on Safari running on MacOS Version 14(sonoma) or 15(sequioa).

Something about the javascript engine in the older version of Safari does not like what's going on now, methinks.

I hope this is helpful. Thanks for all you do!

[mairaw]

Tagging @danroth27 for help

[danroth27]

@julianadormon Thank you for testing with .NET 9 RC1! We want to make sure upgrading to .NET 9 is easy and seamless, so this sort of early feedback is super valuable.

The console reports: blazor.server.js SyntaxError: Unexpected token '{'

Can you please verify that the blazor.server.js file is being correctly downloaded on these devices?

I have no problems on Safari running on MacOS Version 14(sonoma) or 15(sequioa).

What versions of Safari seem to have the issue?

[julianadormon]

Hi Dan! Thank you.
Safari Version 16.3. with a Mac Studio using Ventura 13.2 for sure and also Safari: Version 16.1 (18614.2.9.1.12)
Mac: 13.0 (22A380). Two different customers.

The same site works fine in newer versions, so I have to assume the file is downloading. But if you really need me to check, I will ask the client to fire up their console again.

[julianadormon]

FYI:
I'm simply using: <script src="/_framework/blazor.server.js"></script>

[MackinnonBuck]

@julianadormon, it would be great if we could get a line number that the error is happening on.

Would it be possible for you to deploy a version of the site using an unminified version of blazor.server.js and have the customer screenshot the error message again, including the line number? Per our official support policy, we only support the latest version of each browser.

Also, could you please have the customer click on the error message and view the blazor.server.js file itself? Maybe invalid JS is being returned by the server.

[dany28]

I have diagnosed problem, there is code in blazor.web.js like this:

class A {
   static {
        this.B = "Ok";
   }     
}

which is not working on old devices (i.e. IOS 16)

replace with

class A {
    static B = "Ok";
}

start working great, right now I'm using fixed copy of blazor.web.js on my project and it's working great

[dany28]

To fix it on build, change tsconfig.json /src/Components/Web.JS/tsconfig.json

removing "useDefineForClassFields": false, produces:

class A {
    static B = "Ok";
}

or change target to "ES2020", result:

class A {
}
A.B = "Ok";

[julianadormon]

@dany28 Thank you! Is this something I can fix because I cannot seem to find /src/Components/Web.JS/tsconfig.json
Any chance you can provide a link to your JS file? Thanks again :)

Actually I am using blazor.server.js not blazor.web.js

[dany28]

@dany28 Thank you! Is this something I can fix because I cannot seem to find /src/Components/Web.JS/tsconfig.json Any chance you can provide a link to your JS file? Thanks again :)

Actually I am using blazor.server.js not blazor.web.js

I don't have fixed version od blazor.server.js, You can do it by yourself

1. in browser developer mode find blazor.server.js, copy content
2. create file blazorfixed.server.js in your application folder wwwroot, paste content
3. find all places with static { this.variableName = variableValue } code, replace it to code like static variableName = variableValue;
4. replace in App.razor code <script src="_framework/blazor.server.js"></script> to <script src="blazorfixed.server.js"></script>

[julianadormon]

Thank you @dany28