Blazor calling JSInterop script that builds UI fails to render correctly

Question

I'm trying to get this to work as per Microsoft's documentation.

The below script code works perfectly in an existing React app and I'm trying to port the app to Blazor. The script loads and inits - and I can see the Iframe being correctly loaded into the browser DOM. However the script (Apple's mapkit.js script) errors out with Attempted to assign to readonly property in the migrateStateTo function, trying to set t.tint = this.node.tint.

MapkitHelper.js

import "https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.js";

export function initialiseMapkit(token, element) {
  // this call seems to work
  mapkit.init({
    authorizationCallback: function(done) {
      done(token)
    }  
  })
  // from here on things seem to go south no matter what I do
  var map = new mapkit.Map(element)
}

MapkitRenderer.razor

@implements IAsyncDisposable
@inject IJSRuntime JS

<div @ref="mapkitElement"></div>

@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<IJSObjectReference>("import", "./MapkitHelper.js");
      await mapModule.InvokeVoidAsync("initialiseMapkit", token, mapkitElement);
    }
  }

  async ValueTask IAsyncDisposable.DisposeAsync() {
    if (mapModule is not null) {
      await mapModule.DisposeAsync();
    }
  }
}

Answer 1

I encountered this problem because I loaded mapkit.js as a module.

import "https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.js";

Loading mapkit.js as a module results in an exception because mapkit.js is not compatible with JavaScript's strict mode. You must instead load mapkit.js in sloppy mode.

<script src="https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.js"></script>

Based on https://developer.apple.com/forums/thread/706389