Menu
I have a blazor server app, with a registered custom element as below code:
builder.Services.AddServerSideBlazor(options =>
{
options.RootComponents.RegisterAsCustomElement<Counter>("my-blazor-counter");
});
I want to import this blazor custom element in another node.js application to convert it into a lit element(web component).
I have added below scripts in my node.js app
<script src="https://localhost:7075/_framework/blazor.server.js"></script>
<script src="https://localhost:7075/_content/Microsoft.AspNetCore.Components.CustomElements/BlazorCustomElements.js"></script>
but while initializing the Blazor it still using node app port and failing while initialization. I am not sure I am missing anything here or if there is any other way to do it.
806
asked Sep 12 '25 21:09
The following describes how I resolved an issue similar to yours: trying to register a custom element, the client not rendering the component and no error message anywhere.
I followed the instructions but the there was nothing happening client-side. After inspecting the websocket's traffic using Firefox I ran into the following message from the client to the server (slightly edited for readability):
ù•€ÀµEndInvokeJSFromDotNet“ÂÚÙ[
2,
false,
"Could not find 'registerBlazorCustomElement' ('registerBlazorCustomElement' was undefined).
findFunction/<@https://localhost:5001/_framework/blazor.server.js:1:497
findFunction@https://localhost:5001/_framework/blazor.server.js:1:465
E@https://localhost:5001/_framework/blazor.server.js:1:2606
attachWebRendererInterop/<@https://localhost:5001/_framework/blazor.server.js:1:33097
attachWebRendererInterop@https://localhost:5001/_framework/blazor.server.js:1:33145
beginInvokeJSFromDotNet/s<@https://localhost:5001/_framework/blazor.server.js:1:3501
beginInvokeJSFromDotNet@https://localhost:5001/_framework/blazor.server.js:1:3475
_invokeClientMethod/<@https://localhost:5001/_framework/blazor.server.js:1:71894
_invokeClientMethod@https://localhost:5001/_framework/blazor.server.js:1:71880
_processIncomingData@https://localhost:5001/_framework/blazor.server.js:1:69922
kt/this.connection.onreceive@https://localhost:5001/_framework/blazor.server.js:1:64322
connect/</o.onmessage@https://localhost:5001/_framework/blazor.server.js:1:48638
EventHandlerNonNull*connect/<@https://localhost:5001/_framework/blazor.server.js:1:48489
connect@https://localhost:5001/_framework/blazor.server.js:1:48005
_startTransport@https://localhost:5001/_framework/blazor.server.js:1:57626
_createTransport@https://localhost:5001/_framework/blazor.server.js:1:56195
_startInternal@https://localhost:5001/_framework/blazor.server.js:1:54044
async*start@https://localhost:5001/_framework/blazor.server.js:1:51309
_startInternal@https://localhost:5001/_framework/blazor.server.js:1:66198
_startWithStateTransitions@https://localhost:5001/_framework/blazor.server.js:1:65598
start@https://localhost:5001/_framework/blazor.server.js:1:65262
Gn@https://localhost:5001/_framework/blazor.server.js:1:129904
Yn@https://localhost:5001/_framework/blazor.server.js:1:127771
async*@https://localhost:5001/_framework/blazor.server.js:1:131523
@https://localhost:5001/_framework/blazor.server.js:1:131529
"
]
In my case it was that I hadn't added <script src="/_content/Microsoft.AspNetCore.Components.CustomElements/BlazorCustomElements.js"></script> to the html.
Manually adding that <script /> is no longer needed, and with .NET 8 it should automatically handle this through the _blazor/initializers endpoint. However with .NET 9 a bug slipped into the SDK, which will be fixed with .NET 10.
87
I was struggling to get this working for a Blazor serverside app. I created a test.html page in the wwwroot of the blazor project.
The fix for me was to specify the base url.
My html looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- my component is here -->
<blazor-counter></blazor-counter>
<base href="http://localhost:5144">
</head>
<body>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
