Got "SyntaxError Unexpected token" trying run MAUI app on Android

[wizd]

Debug output:

[chromium] [INFO:CONSOLE(1)] "Unexpected token =
[chromium] SyntaxError: Unexpected token =
[chromium]    at Microsoft.JSInterop.JSRuntime.<InvokeAsync>d__16`1[[Microsoft.JSInterop.IJSObjectReference, Microsoft.JSInterop, Version=6.0.0.0, Culture=neutral, PublicKeyToken=adb9793829ddae60]].MoveNext()
[chromium]    at Blazorise.Modules.JSButtonModule.Initialize(ElementReference elementRef, String elementId, Object options)
[chromium]    at Blazorise.Button.<OnInitialized>b__12_0()
[chromium]    at Blazorise.BaseAfterRenderComponent.OnAfterRenderAsync(Boolean firstRender)
[chromium]    at Blazorise.BaseComponent.OnAfterRenderAsync(Boolean firstRender)
[chromium]    at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)", source: https://0.0.0.0/_framework/blazor.webview.js (1)

MAUI preview, latest VS2022 preview

[adamhathcock]

I also see this regularly in a production server side app but can't determine if it's actually hurting users

Microsoft.JSInterop.JSException: Unexpected token '='. Expected an opening '(' before a method's parameter list.
parseModule@[native code]
[native code]
asyncFunctionResume@[native code]
[native code]
promiseReactionJobWithoutPromise@[native code]
promiseReactionJob@[native code]
   at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
   at Blazorise.Modules.JSButtonModule.Initialize(ElementReference elementRef, String elementId, Object options)
   at Blazorise.Button.<OnInitialized>b__12_0()
   at Blazorise.BaseAfterRenderComponent.OnAfterRenderAsync(Boolean firstRender)
   at Blazorise.BaseComponent.OnAfterRenderAsync(Boolean firstRender)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

Version 0.9.5.2 Bootstrap 4

[adamhathcock]

Possibly related:

Microsoft.JSInterop.JSException: Importing a module script failed.
undefined
   at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
   at Blazorise.Modules.JSTextEditModule.Initialize(ElementReference elementRef, String elementId, String maskType, String editMask)
   at Blazorise.TextEdit.OnFirstAfterRenderAsync()
   at Blazorise.BaseComponent.OnAfterRenderAsync(Boolean firstRender)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

Just feels similar to the above issue as it all has to do with the component Module initialization javascript. I see this less though. Not sure where to look to either initialize things better for the page or investigate what's going wrong (if anything)

[adamhathcock]

Another found happening. I'm on 0.9.5.4 now, Blazor server.

I was guessing this has something to do with other javascript errors maybe happening then causing the scripts for Blazorise to not load. Still can't narrow down. Occasionally happens with my custom controls but since Blazorise is the most heavily used, it has the most errors. Like I've said, I can't tell if this is actually hurting anything (like the JSDisconnected exceptions not being a real issue).

This kind of stuff happens <1-2% of the time looking at traffic. However, still quite noisey.

System.AggregateException: Exceptions were encountered while disposing components. (Unexpected token '='. Expected an opening '(' before a method's parameter list.
parseModule@[native code]
[native code]
asyncFunctionResume@[native code]
[native code]
promiseReactionJobWithoutPromise@[native code]
promiseReactionJob@[native code]) (Unexpected token '='. Expected an opening '(' before a method's parameter list.
parseModule@[native code]
[native code]
asyncFunctionResume@[native code]
[native code]
promiseReactionJobWithoutPromise@[native code]
promiseReactionJob@[native code]) (Unexpected token '='. Expected an opening '(' before a method's parameter list.
parseModule@[native code]
[native code]
asyncFunctionResume@[native code]
[native code]
promiseReactionJobWithoutPromise@[native code]
promiseReactionJob@[native code]) (Unexpected token '='. Expected an opening '(' before a method's parameter list.
parseModule@[native code]
[native code]
asyncFunctionResume@[native code]
[native code]
promiseReactionJobWithoutPromise@[native code]
promiseReactionJob@[native code]) (Unexpected token '='. Expected an opening '(' before a method's parameter list.
parseModule@[native code]
[native code]
asyncFunctionResume@[native code]
[native code]
promiseReactionJobWithoutPromise@[native code]
promiseReactionJob@[native code]) (Unexpected token '='. Expected an opening '(' before a method's parameter list.
parseModule@[native code]
[native code]
asyncFunctionResume@[native code]
[native code]
promiseReactionJobWithoutPromise@[native code]
promiseReactionJob@[native code]) (Unexpected token '='. Expected an opening '(' before a method's parameter list.
parseModule@[native code]
[native code]
asyncFunctionResume@[native code]
[native code]
promiseReactionJobWithoutPromise@[native code]
promiseReactionJob@[native code]) (Unexpected token '='. Expected an opening '(' before a method's parameter list.
parseModule@[native code]
[native code]
asyncFunctionResume@[native code]
[native code]
promiseReactionJobWithoutPromise@[native code]
promiseReactionJob@[native code]) (Unexpected token '='. Expected an opening '(' before a method's parameter list.
parseModule@[native code]
[native code]
asyncFunctionResume@[native code]
[native code]
promiseReactionJobWithoutPromise@[native code]
promiseReactionJob@[native code]) (Unexpected token '='. Expected an opening '(' before a method's parameter list.
parseModule@[native code]
[native code]
asyncFunctionResume@[native code]
[native code]
promiseReactionJobWithoutPromise@[native code]
promiseReactionJob@[native code]) (Unexpected token '='. Expected an opening '(' before a method's parameter list.
parseModule@[native code]
[native code]
asyncFunctionResume@[native code]
[native code]
promiseReactionJobWithoutPromise@[native code]
promiseReactionJob@[native code]) (Unexpected token '='. Expected an opening '(' before a method's parameter list.
parseModule@[native code]
[native code]
asyncFunctionResume@[native code]
[native code]
promiseReactionJobWithoutPromise@[native code]
promiseReactionJob@[native code])
 ---> Microsoft.JSInterop.JSException: Unexpected token '='. Expected an opening '(' before a method's parameter list.
parseModule@[native code]
[native code]
asyncFunctionResume@[native code]
[native code]
promiseReactionJobWithoutPromise@[native code]
promiseReactionJob@[native code]
   at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
   at Blazorise.Modules.JSButtonModule.Destroy(ElementReference elementRef, String elementId)
   at Blazorise.Extensions.ModuleExtensions.SafeDestroy(IJSDestroyableModule module, ElementReference elementRef, String elementId)
   at Blazorise.Button.DisposeAsync(Boolean disposing)
   at Blazorise.BaseAfterRenderComponent.DisposeAsync()
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.<>c__DisplayClass69_0.<<Dispose>g__HandleAsyncExceptions|1>d.MoveNext()

[stsrki]

@adamhathcock That might be related to an unsupported browser. Maybe it doesn't fully support some of the ES6 features and it fails to parse. Do you have logs of what browser might be problematic?

[adamhathcock]

@stsrki I don't have logs that associate any browsers to errors but that's something to investigate.

The noise is definitely proportional to traffic but a tiny percentage. I wish I could better hook into this error pipeline on CircuitHost but it's not exposed.

I'm guessing these are errors I don't care if browsers don't support the javascript. Looking at traffic, most browsers are recent desktop and mobile ones. Of course, "other" is nearly 25% 🙄

I'm having to blanket ignore JSExceptions as I can't filter better than that. There might be nothing for anyone to do here.

[stsrki]

The least we could do is to not use some of the newest JS features, like the Nullish coalescing operator for example. But as you already said, not sure if it's worth it considering that it is just a fraction of browsers not supporting new features.

[adamhathcock]

I guess it depends on how new these features are. If they're years old then not a big deal. Unfortunately, these are managed and polyfilled for browsers.

I'm not primarily front end so I'm unfamiliar with what browsers support what features. If the JS could be make simplier then that might help. However, there will always be this problem and I wish there was a better way to manage it. I guess that's a Blazor platform thing.

[stsrki]

We all want to work with the latest tech. Somewhere the line must be drawn, I guess.

[adamhathcock]

Seems like someone came to the same conclusion about the javascript: https://mikaberglund.com/javascript-interop-error-in-blazor-jsexception-unexpected-token/

[stsrki]

Should be fixed with #3336 and will be available with 0.9.5.5. If the error still persists please open a new ticket.

[adamhathcock]

thank you!