Open UweKeim opened 9 months ago
Any workaround? Same problem here...
It seems, that all my favorite Blazor library developers have shifted priorities away from .NET 8 Blazor 😭.
I have the same problem.
I found a workaround. This is because of the new Blazor SSR, it changes the way that JS is rendered.
You need to use PageScript: https://github.com/MackinnonBuck/blazor-page-script
Import the SweetAlert2 Script in the MainLayout like this: <PageScript Src="./_content/CurrieTechnologies.Razor.SweetAlert2/sweetAlert2.min.js" />
Set a RenderMode for HeadOutlet like this: <HeadOutlet @rendermode="new InteractiveAutoRenderMode(prerender: false)" />
With this trick everything should be working just fine.
This trick solved issues with all JS-based libraries I've imported.
In case anyone wonders: The NuGet package of PageScript is named "BlazorPageScript
".
And you have to add this to "_Imports.razor":
...
@using BlazorPageScript
...
@Pvxtotal When doing your steps, I get an error:
InvalidOperationException: A component of type 'Microsoft.AspNetCore.Components.Web.HeadOutlet' has render mode 'InteractiveAutoRenderMode', but the required endpoints are not mapped on the server. When calling 'MapRazorComponents', add a call to 'AddInteractiveWebAssemblyRenderMode'. For example, 'builder.MapRazorComponents<...>.AddInteractiveWebAssemblyRenderMode()'
Could you please share some more code of your solution?
@UweKeim in your case use HeadOutlet like this: <HeadOutlet @rendermode="new InteractiveServerRenderMode(prerender: false)" />
Thanks, @Pvxtotal, I've already tried that, too, without success.
I've changed the <HeadOutlet />
in mit "App.razor" to:
<HeadOutlet @rendermode="new InteractiveServerRenderMode(prerender: false)" />
I removed this from the "App.razor":
<script src="_content/CurrieTechnologies.Razor.SweetAlert2/sweetAlert2.min.js"></script>
And then I've added this to "MainLayout.razor":
<HeadContent>
<PageScript Src="_content/CurrieTechnologies.Razor.SweetAlert2/sweetAlert2.min.js" />
</HeadContent>
When clicking the button to show a SweetAlert2 dialog, I get this error:
Error: Microsoft.JSInterop.JSException: Could not find 'CurrieTechnologies.Razor.SweetAlert2.Fire' ('CurrieTechnologies' was undefined).
With this call stack:
Error: Could not find 'CurrieTechnologies.Razor.SweetAlert2.Fire' ('CurrieTechnologies' was undefined).
at https://localhost:7133/_framework/blazor.web.js:1:734
at Array.forEach (<anonymous>)
at l.findFunction (https://localhost:7133/_framework/blazor.web.js:1:702)
at b (https://localhost:7133/_framework/blazor.web.js:1:5445)
at https://localhost:7133/_framework/blazor.web.js:1:3238
at new Promise (<anonymous>)
at y.beginInvokeJSFromDotNet (https://localhost:7133/_framework/blazor.web.js:1:3201)
at fn._invokeClientMethod (https://localhost:7133/_framework/blazor.web.js:1:62541)
at fn._processIncomingData (https://localhost:7133/_framework/blazor.web.js:1:60016)
at connection.onreceive (https://localhost:7133/_framework/blazor.web.js:1:53657)
at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
at CurrieTechnologies.Razor.SweetAlert2.SweetAlertService.FireAsync(String title, String message, SweetAlertIcon icon)
at BlazorApp6.Components.Pages.Home.<BuildRenderTree>b__0_1() in C:\Users\ukeim\Documents\Visual Studio 2022\Projects\BlazorApp6\Components\Pages\Home.razor:line 11
at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)
Probably I'm missing something but can't figure out what.
@UweKeim Change it to: <PageScript Src="./_content/CurrieTechnologies.Razor.SweetAlert2/sweetAlert2.min.js" />
./ at the start
Thanks again, @Pvxtotal, I've also tried this without success.
It seems that I solved it by not placing the <PageScript...
component into the <HeadContent>
tags, but simply at the very end of the "MainLayout.razor" page:
<PageScript Src="/_content/CurrieTechnologies.Razor.SweetAlert2/sweetAlert2.min.js" />
I still have to have this in the "App.razor":
<HeadOutlet @rendermode="new InteractiveServerRenderMode(prerender: false)" />
But all after all, it seems to work.
Sorry for my absence. I'll be looking into this, but .NET 8 runtime support has been added. That may aleviate this issue, but if there is a breaking change in .NET 8 I'll need to work out a fix.
@Basaingeal This is related to how Blazor SSR load scripts when enhanced navigation is on. If you disable enhanced navigation everything works fine. I still don't know any workaround besides disabling enhanced navigation or turning the entire app into Interactive.
Work for me adding only this line @rendermode="@RenderMode.InteractiveServer" on app.razor in HeadOutlet and Routes also works fine with @rendermode="@(new InteractiveServerRenderMode(false))"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="/" />
<link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
<link rel="stylesheet" href="app.css" />
<link rel="stylesheet" href="Biblioteca.Server.styles.css" />
<link rel="icon" type="image/png" href="favicon.png" />
<HeadOutlet @rendermode="@RenderMode.InteractiveServer"/>
</head>
<body>
<Routes @rendermode="@RenderMode.InteractiveServer" />
<script src="_framework/blazor.web.js"></script>
<Script src="_content/CurrieTechnologies.Razor.SweetAlert2/sweetAlert2.min.js"></Script>
</body>
Issue
After navigating away and back to a page, a call to
Swal.FireAsync()
shows an alert that has CSS missing.Steps
I've created a new Blazor Web App with these configuration settings:
I then added
to my project's CSPROJ file, added
right to the end before the
</body>
tag:and added this to my "Program.cs":
Next, I created a simple button in "Home.razor":
I've also changed
@rendermode InteractiveServer
on that page. The full source code of the page looks like this:This results in this:
When I click the button, it shows this alert:
I can do this multiple times successfully.
Next, I navigate to another page:
And then I navigate back to the home page:
When I then click the button, the alert appears, but it seems to have no styling:
It is shown that the bottom left of the page.
It seems to work correctly (i.e. I can click the OK button to close the alert), but it looks wrong.
Expected behavior
I would expect that Razor.SweetAlert2 works every time, not just when I do not navigate.
Desktop