Blazor renders components but immediately fails to connect

user_3617557 0
Viewed 945

I've followed the documentation (and a number of blogs) for adding blazor components to a razor pages app. The razor page is rendering the components perfectly, but then immediately get 'trying to reconnect' which always fails. Console output says (running on localhost, obviously):

[2020-07-20T00:22:59.957Z] Information: Normalizing '_blazor' to 'https://localhost:44306/_blazor'.
blazor.server.js:1 [2020-07-20T00:22:59.961Z] Debug: Starting HubConnection.
blazor.server.js:1 [2020-07-20T00:22:59.969Z] Debug: Starting connection with transfer format 'Binary'.
blazor.server.js:1 [2020-07-20T00:22:59.970Z] Debug: Sending negotiation request: https://localhost:44306/_blazor/negotiate?negotiateVersion=1.
blazor.server.js:1 [2020-07-20T00:23:00.145Z] Debug: Selecting transport 'WebSockets'.
blazor.server.js:1 [2020-07-20T00:23:00.174Z] Information: WebSocket connected to wss://localhost:44306/_blazor?id=vuY411dkAsPan4fQrNN3aw.
blazor.server.js:1 [2020-07-20T00:23:00.175Z] Debug: The HttpConnection connected successfully.
blazor.server.js:1 [2020-07-20T00:23:00.175Z] Debug: Sending handshake request.
blazor.server.js:1 [2020-07-20T00:23:00.176Z] Information: Using HubProtocol 'blazorpack'.
blazor.server.js:1 [2020-07-20T00:23:00.182Z] Debug: Server handshake complete.
blazor.server.js:1 [2020-07-20T00:23:00.182Z] Debug: HubConnection connected successfully.
blazor.server.js:1 [2020-07-20T00:23:00.327Z] Information: Close message received from server.
blazor.server.js:1 [2020-07-20T00:23:00.329Z] Debug: HttpConnection.stopConnection(undefined) called while in state Disconnecting.
blazor.server.js:1 [2020-07-20T00:23:00.332Z] Error: Connection disconnected with error 'Error: Server returned an error on close: Connection closed with an error.'.
e.log @ blazor.server.js:1
e.stopConnection @ blazor.server.js:1
transport.onclose @ blazor.server.js:1
e.close @ blazor.server.js:1
e.stop @ blazor.server.js:1
(anonymous) @ blazor.server.js:1
(anonymous) @ blazor.server.js:1
(anonymous) @ blazor.server.js:1
a @ blazor.server.js:1
Promise.then (async)
c @ blazor.server.js:1
(anonymous) @ blazor.server.js:1
M @ blazor.server.js:1
e.stopInternal @ blazor.server.js:1
(anonymous) @ blazor.server.js:1
(anonymous) @ blazor.server.js:1
(anonymous) @ blazor.server.js:1
(anonymous) @ blazor.server.js:1
M @ blazor.server.js:1
e.stop @ blazor.server.js:1
e.processIncomingData @ blazor.server.js:1
connection.onreceive @ blazor.server.js:1
i.onmessage @ blazor.server.js:1
blazor.server.js:1 [2020-07-20T00:23:00.333Z] Debug: HubConnection.connectionClosed(Error: Server returned an error on close: Connection closed with an error.) called while in state Connected.
blazor.server.js:1 Uncaught (in promise) Error: Server returned an error on close: Connection closed with an error.
    at e.processIncomingData (blazor.server.js:1)
    at e.connection.onreceive (blazor.server.js:1)
    at WebSocket.i.onmessage (blazor.server.js:1)
e.processIncomingData @ blazor.server.js:1
connection.onreceive @ blazor.server.js:1
i.onmessage @ blazor.server.js:1
Promise.then (async)
c @ blazor.server.js:8
a @ blazor.server.js:8
Promise.then (async)
c @ blazor.server.js:8
(anonymous) @ blazor.server.js:8
r @ blazor.server.js:8
E @ blazor.server.js:8
(anonymous) @ Eol:12448
blazor.server.js:19 [2020-07-20T00:23:03.338Z] Error: TypeError: window.Blazor.reconnect is not a function
e.log @ blazor.server.js:19
(anonymous) @ blazor.server.js:19
(anonymous) @ blazor.server.js:19
(anonymous) @ blazor.server.js:19
a @ blazor.server.js:19
Promise.then (async)
c @ blazor.server.js:19
(anonymous) @ blazor.server.js:19
r @ blazor.server.js:19
e.attemptPeriodicReconnection @ blazor.server.js:19
e @ blazor.server.js:19
e.onConnectionDown @ blazor.server.js:19
(anonymous) @ blazor.server.js:8
(anonymous) @ blazor.server.js:1
e.completeClose @ blazor.server.js:1
e.connectionClosed @ blazor.server.js:1
connection.onclose @ blazor.server.js:1
e.stopConnection @ blazor.server.js:1
transport.onclose @ blazor.server.js:1
e.close @ blazor.server.js:1
e.stop @ blazor.server.js:1
(anonymous) @ blazor.server.js:1
(anonymous) @ blazor.server.js:1
(anonymous) @ blazor.server.js:1
a @ blazor.server.js:1
Promise.then (async)
c @ blazor.server.js:1
(anonymous) @ blazor.server.js:1
M @ blazor.server.js:1
e.stopInternal @ blazor.server.js:1
(anonymous) @ blazor.server.js:1
(anonymous) @ blazor.server.js:1
(anonymous) @ blazor.server.js:1
(anonymous) @ blazor.server.js:1
M @ blazor.server.js:1
e.stop @ blazor.server.js:1
e.processIncomingData @ blazor.server.js:1
connection.onreceive @ blazor.server.js:1
i.onmessage @ blazor.server.js:1
blazor.server.js:19 [2020-07-20T00:23:06.346Z] Error: TypeError: window.Blazor.reconnect is not a function
e.log @ blazor.server.js:19
(anonymous) @ blazor.server.js:19
(anonymous) @ blazor.server.js:19
(anonymous) @ blazor.server.js:19
a @ blazor.server.js:19
Promise.then (async)
c @ blazor.server.js:19
a @ blazor.server.js:19
Promise.then (async)
c @ blazor.server.js:19
(anonymous) @ blazor.server.js:19
r @ blazor.server.js:19
e.attemptPeriodicReconnection @ blazor.server.js:19
e @ blazor.server.js:19
e.onConnectionDown @ blazor.server.js:19
(anonymous) @ blazor.server.js:8
(anonymous) @ blazor.server.js:1
e.completeClose @ blazor.server.js:1
e.connectionClosed @ blazor.server.js:1
connection.onclose @ blazor.server.js:1
e.stopConnection @ blazor.server.js:1
transport.onclose @ blazor.server.js:1
e.close @ blazor.server.js:1
e.stop @ blazor.server.js:1
(anonymous) @ blazor.server.js:1
(anonymous) @ blazor.server.js:1
(anonymous) @ blazor.server.js:1
a @ blazor.server.js:1
Promise.then (async)
c @ blazor.server.js:1
(anonymous) @ blazor.server.js:1
M @ blazor.server.js:1
e.stopInternal @ blazor.server.js:1
(anonymous) @ blazor.server.js:1
(anonymous) @ blazor.server.js:1
(anonymous) @ blazor.server.js:1
(anonymous) @ blazor.server.js:1
M @ blazor.server.js:1
e.stop @ blazor.server.js:1
e.processIncomingData @ blazor.server.js:1
connection.onreceive @ blazor.server.js:1
i.onmessage @ blazor.server.js:1
blazor.server.js:19 [2020-07-20T00:23:09.353Z] Error: TypeError: window.Blazor.reconnect is not a function
e.log @ blazor.server.js:19
(anonymous) @ blazor.server.js:19
(anonymous) @ blazor.server.js:19
(anonymous) @ blazor.server.js:19
a @ blazor.server.js:19
Promise.then (async)
c @ blazor.server.js:19
a @ blazor.server.js:19
Promise.then (async)
c @ blazor.server.js:19
a @ blazor.server.js:19
Promise.then (async)
c @ blazor.server.js:19
(anonymous) @ blazor.server.js:19
r @ blazor.server.js:19
e.attemptPeriodicReconnection @ blazor.server.js:19
e @ blazor.server.js:19
e.onConnectionDown @ blazor.server.js:19
(anonymous) @ blazor.server.js:8
(anonymous) @ blazor.server.js:1
e.completeClose @ blazor.server.js:1
e.connectionClosed @ blazor.server.js:1
connection.onclose @ blazor.server.js:1
e.stopConnection @ blazor.server.js:1
transport.onclose @ blazor.server.js:1
e.close @ blazor.server.js:1
e.stop @ blazor.server.js:1
(anonymous) @ blazor.server.js:1
(anonymous) @ blazor.server.js:1
(anonymous) @ blazor.server.js:1
a @ blazor.server.js:1
Promise.then (async)
c @ blazor.server.js:1
(anonymous) @ blazor.server.js:1
M @ blazor.server.js:1
e.stopInternal @ blazor.server.js:1
(anonymous) @ blazor.server.js:1
(anonymous) @ blazor.server.js:1
(anonymous) @ blazor.server.js:1
(anonymous) @ blazor.server.js:1
M @ blazor.server.js:1
e.stop @ blazor.server.js:1
e.processIncomingData @ blazor.server.js:1
connection.onreceive @ blazor.server.js:1
i.onmessage @ blazor.server.js:1
blazor.server.js:19 [2020-07-20T00:23:12.375Z] Error: TypeError: window.Blazor.reconnect is not a function
e.log @ blazor.server.js:19
(anonymous) @ blazor.server.js:19
(anonymous) @ blazor.server.js:19
(anonymous) @ blazor.server.js:19
a @ blazor.server.js:19
Promise.then (async)
c @ blazor.server.js:19
a @ blazor.server.js:19
Promise.then (async)
c @ blazor.server.js:19
a @ blazor.server.js:19
Promise.then (async)
c @ blazor.server.js:19
a @ blazor.server.js:19
Promise.then (async)
c @ blazor.server.js:19
(anonymous) @ blazor.server.js:19
r @ blazor.server.js:19
e.attemptPeriodicReconnection @ blazor.server.js:19
e @ blazor.server.js:19
e.onConnectionDown @ blazor.server.js:19
(anonymous) @ blazor.server.js:8
(anonymous) @ blazor.server.js:1
e.completeClose @ blazor.server.js:1
e.connectionClosed @ blazor.server.js:1
connection.onclose @ blazor.server.js:1
e.stopConnection @ blazor.server.js:1
transport.onclose @ blazor.server.js:1
e.close @ blazor.server.js:1
e.stop @ blazor.server.js:1
(anonymous) @ blazor.server.js:1
(anonymous) @ blazor.server.js:1
(anonymous) @ blazor.server.js:1
a @ blazor.server.js:1
Promise.then (async)
c @ blazor.server.js:1
(anonymous) @ blazor.server.js:1
M @ blazor.server.js:1
e.stopInternal @ blazor.server.js:1
(anonymous) @ blazor.server.js:1
(anonymous) @ blazor.server.js:1
(anonymous) @ blazor.server.js:1
(anonymous) @ blazor.server.js:1
M @ blazor.server.js:1
e.stop @ blazor.server.js:1
e.processIncomingData @ blazor.server.js:1
connection.onreceive @ blazor.server.js:1
i.onmessage @ blazor.server.js:1
blazor.server.js:19 [2020-07-20T00:23:15.390Z] Error: TypeError: window.Blazor.reconnect is not a function
e.log @ blazor.server.js:19
(anonymous) @ blazor.server.js:19
(anonymous) @ blazor.server.js:19
(anonymous) @ blazor.server.js:19
a @ blazor.server.js:19
Promise.then (async)
c @ blazor.server.js:19
a @ blazor.server.js:19
Promise.then (async)
c @ blazor.server.js:19
a @ blazor.server.js:19
Promise.then (async)
c @ blazor.server.js:19
a @ blazor.server.js:19
Promise.then (async)
c @ blazor.server.js:19
a @ blazor.server.js:19
Promise.then (async)
c @ blazor.server.js:19
(anonymous) @ blazor.server.js:19
r @ blazor.server.js:19
e.attemptPeriodicReconnection @ blazor.server.js:19
e @ blazor.server.js:19
e.onConnectionDown @ blazor.server.js:19
(anonymous) @ blazor.server.js:8
(anonymous) @ blazor.server.js:1
e.completeClose @ blazor.server.js:1
e.connectionClosed @ blazor.server.js:1
connection.onclose @ blazor.server.js:1
e.stopConnection @ blazor.server.js:1
transport.onclose @ blazor.server.js:1
e.close @ blazor.server.js:1
e.stop @ blazor.server.js:1
(anonymous) @ blazor.server.js:1
(anonymous) @ blazor.server.js:1
(anonymous) @ blazor.server.js:1
a @ blazor.server.js:1
Promise.then (async)
c @ blazor.server.js:1
(anonymous) @ blazor.server.js:1
M @ blazor.server.js:1
e.stopInternal @ blazor.server.js:1
(anonymous) @ blazor.server.js:1
(anonymous) @ blazor.server.js:1
(anonymous) @ blazor.server.js:1
(anonymous) @ blazor.server.js:1
M @ blazor.server.js:1
e.stop @ blazor.server.js:1
e.processIncomingData @ blazor.server.js:1
connection.onreceive @ blazor.server.js:1
i.onmessage @ blazor.server.js:1

  • _Layout.cshtml contains <base href="/"> in head and at the end of <body> it has:

    <script src="_framework/blazor.server.js" autostart="false"></script>
<script>
    Blazor.start({
        configureSignalR: function (builder) {
            builder.configureLogging(1); // LogLevel.Information
        }
    });
</script>

  • I have _Imports.razor at the root and in the Pages folder, containing

    @using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.JSInterop
@using MyAppNamespace

  • Startup.cs has services.AddServerSideBlazor(); in ConfigureServices, and Configure says:

    .MapRazorPages();
.MapBlazorHub();
.MapFallbackToPage("/_Host");

  • _Host.cshtml is in the Pages folder, containing

    @page "/blazor"
@{
    Layout = "_Layout";
}

<app>
    <component type="typeof(App)" render-mode="ServerPrerendered" />
</app>

Based on the console logs, connecting from the Index page works fine, but not for another page that uses components.

I am obviously missing some bit of plumbing, but I don't know what it is. What am I missing?

Update: I tried using a blazor component in the Index page, where it seemed client was connecting ok, but I see the same thing: The page renders the components, and then the connection is closed and no attempt to reconnect succeeds.

blazor
2 Answers

I observed this behavior when passing a complex object as a parameter to my component.

<component type="typeof(MyComponent)" render-mode="ServerPrerendered" param-Data="@myComplexObject" />

It seems that the component tag helper only works with simple type paremeters.

For me, I was able to work around this by setting the render-mode to Static, but this won't be a good solution for everybody.

user_10819180

You said: _Layout.cshtml contains <href="/">

If this isn't a typo, change it to <base href="/">

user_136677480
Related