Loading a Javascript File as an ESModule in a Blazor Server App

I am trying to run a self hosted dice rolling app in a Blazor Server Application. The original site comes from here. https://fantasticdice.games/docs/intro. This site loads the file dice-box-min.js in a dice.js javascript file using import. I believe this means it loads dice-box-min.js into the object DiceBox according to the site as an ESModule.

This is not able to work in a Blazor Server App. Apparently Blazor's JSInterop cannot handle ES6 import directly inside a dynamically loaded module. So I need an alternative. Here is what I have thus far.

This is currently a Blazor Server App .NET9 Application.

In my App.razor I have the following two lines in my tag.

<script src="js/dice.js"></script><script type="module">    import DiceBox from './js/dice-box-min.js';    window.DiceBox = DiceBox;</script>

This is my dice.js file currently

let diceBox;  // Store a global reference// Initialize DiceBoxasync function initializeDiceBox() {    try {        const DiceBox = await waitForDiceBox();        diceBox = DiceBox;        if (diceBox != null && diceBox != undefined) {            diceBox = new DiceBox("#dice-box", {                assetPath: "/public/assets/DiceBox/",                theme: "default",                themeColor: "#feea03",                offscreen: false,                scale: 6            });            await diceBox.init();        }    } catch (error) {        console.error(error);    }}// Roll dice with a given dice notation (e.g., "4d6")async function rollDice(diceNotation) {     if (diceBox != null && diceBox != undefined) {        await initializeDiceBox();    }    await diceBox.roll(diceNotation);}function waitForDiceBox() {    return new Promise((resolve, reject) => {        let attempts = 0;        const check = () => {            if (window.DiceBox) {                console.error("returning dice box!");                resolve(window.DiceBox);            } else if (attempts < 10) {                attempts++;                setTimeout(check, 200); // Retry every 200ms            } else {                reject("DiceBox failed to load.");            }        };        check();    });}window.initializeDiceBox = initializeDiceBox;window.rollDice = rollDice;

/public/assets/DiceBox/ contains libraries and assets for this application to run as well. This is loading correctly.

WaitForDiceBox is also returning "returning dice box" letting me know that the import I believe worked.

In my blazor razor file I have an onevent for a button. It is executing this line.

await JSRuntime.InvokeVoidAsync("rollDice", "4D6");

When I run my application I get this in my console screen in the browser.

Now I don't know why I get the "old api" error. When I create DiceBox it is a single argument of configuration statements. I'm pretty sure this might not be the cause but if it is I'm still at a loss to what it actually wants.

I'm more worried about the idea that it can't load world.onscreen.min.js

Inside of dice-box-min.js there is an import call to this js file. I'm wondering if this has the exact same issue as dice-box-min.js had where loading ESModules dynamically was the problem. If so I have no idea how to address or fix this.

Is it possible that I have to "retool" dice-box-min.js to remove that import? Maybe also download it and include it in app.razor? Is there another issue here that I may have overlooked. I'm very new to Blazor Server Apps / Javascript ESModules and the like.

I also have a github repository of the issue in a barebones application if you would like to see the setup entirely.

https://github.com/davidklecker/FantasticDiceBlazorServerApp.git

What I expect to see are four 6 sided dice roll across the screen.

Thank you for any help you can.