[How to] BlazingStory with MudBlazor using ServerMode #40

Fronix · 2024-05-08T06:14:37Z

So I finally figured out why MudBlazor was seemingly having random issues in BlazingStories.
More specifically

Couldn't find eventhandler id's
Complaining of the components being statically rendered

System.InvalidOperationException: JavaScript interop calls cannot be issued at this time. This is because the component is being statically rendered. When prerendering is enabled, JavaScript interop calls can only be performed during the OnAfterRenderAsync lifecycle method.
   at Microsoft.AspNetCore.Components.Server.Circuits.RemoteJSRuntime.BeginInvokeJS(Int64 asyncHandle, String identifier, String argsJson, JSCallResultType resultType, Int64 targetInstanceId)
   at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, CancellationToken cancellationToken, Object[] args)
   at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
   at BlazingStory.Internals.Extensions.IJSExtensions.ImportAsync(IJSRuntime jsRuntime, String modulePath)
   at BlazingStory.Internals.Services.JSModule.GetModuleAsync()
   at BlazingStory.Internals.Services.JSModule.InvokeVoidAsync(String identifier, Object[] args)
   at BlazingStory.Internals.Pages.Canvas.CanvasFrame.EventTArgMonitorHandler[TArgs](String name, TArgs eventArgs)
   at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)
   at IVO.Ui.Components.Picker`1.SetTextAsync(String value, Boolean callback) in D:\Git\BlazingStoryTest\MudBlazor\Components\Picker\Picker.razor.cs:line 294
   at IVO.Ui.Components.DatePicker.SetDateAsync(Nullable`1 date, Boolean updateValue) in D:\Git\BlazingStoryTest\MudBlazor\Components\DatePicker\DatePicker.cs:line 67
   at IVO.Ui.Core.TaskExtensions.AndForget(Task task, Boolean ignoreExceptions) in D:\Git\BlazingStoryTest\MudBlazor\Core\Extensions\TaskExtensions.cs:line 12System.InvalidOperationException: JavaScript interop calls cannot be issued at this time. This is because the component is being statically rendered. When prerendering is enabled, JavaScript interop calls can only be performed during the OnAfterRenderAsync lifecycle method.

The fix

Use @InteractiveServerNoPreRender

In your IndexPage.razor and IFramePage.razor replace all @InteractiveServer with @InteractiveServerNoPreRender

Remove the `blazor.web.js` script tag in `IFramePage.razor`

Example IndexPage.razor:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!--
    If you need to add <link> or <script> elements to include CSS or JavaScript files
    for canvas views of your Stories,
    YOU SHOULD DO THAT IN THE "IFramePage.razor" FILE, NOT HERE.
    -->
    <title>StoriesTester</title>
    <base href="/" />
    <link rel="stylesheet" href="css/blazor-ui.css" />
    <HeadOutlet @rendermode="@InteractiveServerNoPreRender" />
</head>

<body>
    <StoriesTester.Components.App @rendermode="@InteractiveServerNoPreRender" />

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>

    <!--
    If you need to add <script> elements to include JavaScript files for canvas views of your Stories,
    YOU SHOULD DO THAT IN THE "IFramePage.razor" FILE, NOT HERE.
    -->
    <script src="_framework/blazor.web.js"></script>
</body>

</html>

Example IFramePage.razor:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>StoriesTester</title>
    <base href="/" />
    <!--
    If you need to add <link> or <script> elements to include CSS or JavaScript files
    for canvas views of your Stories,
    YOU SHOULD PLACE THEM HERE, not in the "IndexPage.razor" file.
    -->
    <link rel="stylesheet" href="css/blazor-ui.css" />
    <link rel="stylesheet" href="IVO.Ui.Stories.styles.css" />
    <!-- MudBlazor -->
    <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
    <HeadOutlet @rendermode="@InteractiveServerNoPreRender" />
</head>

<body>
    <component type="typeof(App)" render-mode="Server" />
    <StoriesTester.Components.App @rendermode="@InteractiveServerNoPreRender" />

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>

    <!--
    If you need to add <script> elements to include JavaScript files for canvas views of your Stories,
    YOU SHOULD PLACE THEM HERE, not in the "index.html" file.
    -->
    <!-- This script shouldn't be here if using serverrender -->
    <!--     <script src="_framework/blazor.web.js"></script> -->
    <script src="_framework/blazor.server.js"></script>
    <script src="_content/MudBlazor/MudBlazor.min.js"></script>
</body>

</html>

The text was updated successfully, but these errors were encountered:

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[How to] BlazingStory with MudBlazor using ServerMode #40

[How to] BlazingStory with MudBlazor using ServerMode #40

Fronix commented May 8, 2024 •

edited

Loading

[How to] BlazingStory with MudBlazor using ServerMode #40

[How to] BlazingStory with MudBlazor using ServerMode #40

Comments

Fronix commented May 8, 2024 • edited Loading

The fix

Use @InteractiveServerNoPreRender

Remove the blazor.web.js script tag in IFramePage.razor

Fronix commented May 8, 2024 •

edited

Loading

Remove the `blazor.web.js` script tag in `IFramePage.razor`