Quantcast
Channel: Active questions tagged blazor - Stack Overflow
Viewing all articles
Browse latest Browse all 4839

How do I put together a Blazor Page that will call a javascript file that needs to import an ESModule?

$
0
0

There is the following application called Fantastic Dice that is a javascript module. It can be loaded as such from the example provided here from this page.

https://codesandbox.io/p/sandbox/dice-es6-module-cdn-lhbs99?file=%2Fsrc%2Findex.js%3A1%2C1-2%2C1

I have tried doing this in a Blazor page with no success.

I have the following javascript file called dice.js

import DiceBox from "https://unpkg.com/@3d-dice/dice-box@1.0.8/dist/dice-box.es.min.js";export function DiceBoxCall() {    let Box = new DiceBox("#dice-box", {        assetPath: "assets/",        origin: "https://unpkg.com/@3d-dice/dice-box@1.0.8/dist/",        theme: "default",        themeColor: "#feea03",        offscreen: true,        scale: 6    });    Box.init().then(async (world) => {        Box.roll(["4d20", "4d12", "4d10", "4d8", "4d6", "4d4"]);    });}

I call it from Blazor using the JSRuntime library

await JSRuntime.InvokeVoidAsync("DiceBoxCall");

This loads, but It cannot find DiceBoxCall. I'm pretty sure its the import but that import is vital to everything. The library fantastic dice uses is an ESModule and the import call is loading the library into a class object. I cannot find any other example that would help me here.


Viewing all articles
Browse latest Browse all 4839

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>