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.
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.