How to import a blazor custom element in another JS application?

user_17727791 0
Viewed 246

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.

custom-element blazor-server-side blazor javascript
1 Answers

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.

user_581070
Related