Blazor SSR rendering on navigation with JS interop/styling

[ladeak]

Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

I have a blazor SSR rendered page, that has a single WebAssembly component that renders something with the help of JavaScript.
When I navigate to another page (same setup, SSR + a single WebAssembly component) two things happen:

• the scroll position is not reset (I see captured in Improve interaction between enhanced nav and scroll position #51646)
• the javascript interop in the webassembly project fails to fully load - it seems some styling does not load

Expected Behavior

Scroll should reset the position.
All styling I'd expect to load. (If I do an F5 on the same pages, the style is picked up correct).

Steps To Reproduce

It seems to happen only navigation with anchor tags.

Exceptions (if any)

I did not observe any on the conosle.

.NET Version

8.0.100

Anything else?

No response

[ynnob]

I want to add that we noticed a problem with loading of styling in our blazor app as well but without webassembly.
This seems to happen when the link is opened from an app or on a device that has not cached the styles/scripts.

The only way to consistently reproduce it for us is if we use IIS Deploy and the page auto opens after successful publishing, then there will be no style. Only refreshing the page will finally load the style.

[javiercn]

@ladeak thanks for contacting us.

Could you provide a minimal repro project?

@ynnob your issue doesn't necessarily seem related, would you mind filing a separate ticket? That said, it's most likely that you need to configure the caching headers.

[ynnob]

@ladeak thanks for contacting us.

Could you provide a minimal repro project?

@ynnob your issue doesn't necessarily seem related, would you mind filing a separate ticket? That said, it's most likely that you need to configure the caching headers.

I just found the source of the problem. I was using the WebOptimizer and publishing my Blazor App to IIS using the publish function of Visual Studio. For whatever reason on the first connection of a device the WebOptimizer tries to acces the obj folder which is not published with the app. It fails and this causes an entire stream of weird exceptions and every ressource failes with either 500 or 404.

The event log for the first requested file states that the WebOptimizer can't acces a path which should not even be present as far as i understand it (i mean by publishing to iis, there is no obj folder):

Category: Microsoft.AspNetCore.Diagnostics.ExceptionHandlerMiddleware
EventId: 1
SpanId: 2ea13da234f83e9f
TraceId: 54fdcae62c87d46c65c9a3e720204362
ParentId: 0000000000000000
RequestId: 800005f7-0000-ef00-b63f-84710c7967bb
RequestPath: /css/app.min.css

An unhandled exception has occurred while executing the request.

Exception: 
System.UnauthorizedAccessException: Access to the path 'C:\inetpub\sites\<IIS_PROJECT_FOLDER>\obj\WebOptimizerCache' is denied.
   at System.IO.FileSystem.CreateDirectory(String fullPath, Byte[] securityDescriptor)
   at System.IO.Directory.CreateDirectory(String path)
   at WebOptimizer.AssetResponseStore.AddAsync(String bucket, String cachekey, AssetResponse assetResponse)
   at WebOptimizer.AssetBuilder.BuildAsync(IAsset asset, HttpContext context, IWebOptimizerOptions options)
   at WebOptimizer.AssetMiddleware.HandleAssetAsync(HttpContext context, IAsset asset, WebOptimizerOptions options)
   at Microsoft.AspNetCore.Diagnostics.ExceptionHandlerMiddlewareImpl.<Invoke>g__Awaited|10_0(ExceptionHandlerMiddlewareImpl middleware, HttpContext context, Task task)

After removing the WebOptimizer from the project everything is fine.
Sorry for hijacking this issue. I will report this to the WebOptimizer repo.

[ladeak]

@javiercn here is a minimal repro (repo): https://github.com/ladeak/Minimal

A standard blazor app with one webassembly interactive component leveraging a BlazorMonaco component in this case.

Recording.2023-11-23.221551.mp4

[javiercn]

@ladeak thanks for the additional details.

This is what's happening.

    <script src="_content/BlazorMonaco/jsInterop.js"></script>
    <script src="_content/BlazorMonaco/lib/monaco-editor/min/vs/loader.js"></script>
    <script src="_content/BlazorMonaco/lib/monaco-editor/min/vs/editor/editor.main.js"></script>

Is injecting the style.css script into the page via a script tag when the script runs, which won't work in scenarios with enhanced navigation because scripts are only loaded and run once.

There are a couple ways to go about this, but it requires updates to the library:

• First, avoiding usage of the style tag and using AdoptedStyleSheets
• Updating the script to attach to the "enhancednavigation" event and inserting styles as needed.

[ladeak]

Thank you for the suggestion, I understand now the issue better, and will take the suggested ways.