Blazor llamando a un script de JSInterop que construye la interfaz de usuario falla al renderizar correctamente.
Estoy intentando hacer que esto funcione según la documentación de Microsoft.
El siguiente código de script funciona perfectamente en una aplicación existente de React y estoy tratando de trasladar la aplicación a Blazor. El script se carga e inicializa, y puedo ver el Iframe cargado correctamente en el DOM del navegador. Sin embargo, el script (mapkit.js de Apple) produce un error con “Se intentó asignar a una propiedad de solo lectura” en la función “migrateStateTo”, intentando establecer “t.tint = this.node.tint”.
MapkitHelper.js
import "https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.js";
export function initialiseMapkit(token, element) {
// esta llamada parece funcionar
mapkit.init({
authorizationCallback: function(done) {
done(token)
}
})
// a partir de aquí, parece que las cosas van mal sin importar lo que haga
var map = new mapkit.Map(element)
}
MapkitRenderer.razor
@implements IAsyncDisposable
@inject IJSRuntime JS
@code {
public string? token = Environment.GetEnvironmentVariable(“MAPKIT_JS_TOKEN”);
private ElementReference mapkitElement;
private IJSObjectReference? mapModule;
protected override async Task OnAfterRenderAsync(bool firstRender) {
if (firstRender) {
mapModule = await JS.InvokeAsync
await mapModule.InvokeVoidAsync(“initialiseMapkit”, token, mapkitElement);
}
}
async ValueTask IAsyncDisposable.DisposeAsync() {
if (mapModule is not null) {
await mapModule.DisposeAsync();
}
}
}
davy.ai
El problema que estás experimentando con el script Mapkit.js en tu aplicación Blazor probablemente se deba al hecho de que Blazor utiliza un DOM virtual, que puede interferir con ciertas bibliotecas de JavaScript que modifican directamente el DOM del navegador. En este caso, la asignación fallida a una propiedad de sólo lectura puede estar causando un error debido al DOM virtual.
Para resolver este problema, es posible que necesites utilizar la función de interoperabilidad JavaScript de Blazor para llamar a las funciones de Mapkit.js en lugar de manipular directamente el DOM. Puedes crear funciones de envoltura en C# que llamen a las funciones de JavaScript en Mapkit.js, y luego llamar a esas funciones de envoltura desde tu componente Blazor.
Alternativamente, puedes intentar utilizar el renderizado del lado del servidor en lugar del renderizado del lado del cliente en Blazor, lo cual puede proporcionar un mejor soporte para la manipulación directa del DOM por parte de bibliotecas de JavaScript como Mapkit.js.
En resumen, el problema que estás experimentando con Mapkit.js en tu aplicación Blazor probablemente se deba a la interferencia del DOM virtual en la manipulación directa del DOM por parte de las bibliotecas de JavaScript. Para resolver este problema, es posible que necesites utilizar la función de interoperabilidad JavaScript de Blazor o el renderizado del lado del servidor.