Render Mode in MainLayout.razor Blazor 8?

I am using interactive server with per component/per page setting.

I am trying to use https://havit.blazor.eu/components/HxMessenger and it is telling me to put this code in the MainLayout

<HxMessenger Position="ToastContainerPosition.TopEnd" />

but nothing works and I suspect it is because there is no render mode set for the MainLayout but I don't know how to set it ever time I try to specify a render mode I crashes with

InvalidOperationException: Cann pass the paramter 'body' to component mainlayout with rendermode InteractiveServerRenderMode'. This is because the paramater is of type RenderFragment which is arbitary code and canot be searlized

Solution

You can't add the render mode to Layouts. You need to go global and add it to App.

<!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="Blazor.Server.SSR.styles.css" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <HeadOutlet @rendermode="InteractiveServer"/>
</head>

<body>
    <Routes @rendermode="InteractiveServer" />
    <script src="_framework/blazor.web.js"></script>
</body>

</html>