TypeError when rolling dice

[PittaPlz]

Hiya, this is my first issue on github because I program as hobby and generally I find workarounds or fixes but this one has me stumped. I tried doing everything I could think of.

I have a react app running only the most recent version of MUI. I have installed dice-box, set up the assets folder, configured the DiceBox and then initialized it through useEffect. Whenever I try to call Dice.roll() I get the following three errors:

ERROR
Cannot read properties of undefined (reading 'diceAvailable')
TypeError: Cannot read properties of undefined (reading 'diceAvailable')
    at vl.roll (http://localhost:3000/static/js/bundle.js:65236:68)
    at onClick (http://localhost:3000/static/js/bundle.js:943:26)
    at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:31004:18)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:31048:20)
    at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:31105:35)
    at invokeGuardedCallbackAndCatchFirstError (http://localhost:3000/static/js/bundle.js:31119:29)
    at executeDispatch (http://localhost:3000/static/js/bundle.js:35262:7)
    at processDispatchQueueItemsInOrder (http://localhost:3000/static/js/bundle.js:35288:11)
    at processDispatchQueue (http://localhost:3000/static/js/bundle.js:35299:9)
    at dispatchEventsForPlugins (http://localhost:3000/static/js/bundle.js:35308:7)
    at http://localhost:3000/static/js/bundle.js:35468:16
    at batchedUpdates$1 (http://localhost:3000/static/js/bundle.js:49886:16)
    at batchedUpdates (http://localhost:3000/static/js/bundle.js:30852:16)
    at dispatchEventForPluginEventSystem (http://localhost:3000/static/js/bundle.js:35467:7)
    at dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay (http://localhost:3000/static/js/bundle.js:32974:9)
    at dispatchEvent (http://localhost:3000/static/js/bundle.js:32968:9)
    at dispatchDiscreteEvent (http://localhost:3000/static/js/bundle.js:32945:9)

ERROR
Cannot read properties of undefined (reading 'diceAvailable')
TypeError: Cannot read properties of undefined (reading 'diceAvailable')
    at vl.roll (http://localhost:3000/static/js/bundle.js:65236:68)
    at onClick (http://localhost:3000/static/js/bundle.js:943:26)
    at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:31004:18)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:31048:20)
    at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:31105:35)
    at invokeGuardedCallbackAndCatchFirstError (http://localhost:3000/static/js/bundle.js:31119:29)
    at executeDispatch (http://localhost:3000/static/js/bundle.js:35262:7)
    at processDispatchQueueItemsInOrder (http://localhost:3000/static/js/bundle.js:35288:11)
    at processDispatchQueue (http://localhost:3000/static/js/bundle.js:35299:9)
    at dispatchEventsForPlugins (http://localhost:3000/static/js/bundle.js:35308:7)
    at http://localhost:3000/static/js/bundle.js:35468:16
    at batchedUpdates$1 (http://localhost:3000/static/js/bundle.js:49886:16)
    at batchedUpdates (http://localhost:3000/static/js/bundle.js:30852:16)
    at dispatchEventForPluginEventSystem (http://localhost:3000/static/js/bundle.js:35467:7)
    at dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay (http://localhost:3000/static/js/bundle.js:32974:9)
    at dispatchEvent (http://localhost:3000/static/js/bundle.js:32968:9)
    at dispatchDiscreteEvent (http://localhost:3000/static/js/bundle.js:32945:9)

ERROR
Uncaught TypeError: Cannot read properties of undefined (reading 'byteLength')
    at handleError (http://localhost:3000/static/js/bundle.js:61652:58)
    at http://localhost:3000/static/js/bundle.js:61671:7

Here is what my code looks like:

import DiceBox from '@3d-dice/dice-box'

const Dice = new DiceBox({
  id: 'dice-box',
  assetPath: './assets/dice-box/'
})

function Component(props) {

  useEffect(()=>{
    Dice.init()
  })

  return(
  <div>
      <Button onClick={()=>{Dice.roll('2d10')}}></Button>
  </div>
  )
}

[PittaPlz]

Update: Turns out it was a webassembly issue (something I don't know the first thing about, yay!) and there are a few issues closed that mention the exact problem I'm facing (though the fixes they mention sound like arcane cyphers to me). Tried migrating my whole app to Vite to no avail. Tried installing vite-plugin-wasm and adding it to vite.config.js, also did nothing. I'm on the verge of giving up... been trying to fix this for days now and it feels like it's something super simple but I'm too much of a rookie to know how to fix.

wasm streaming compile failed: TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.

falling back to ArrayBuffer instantiation

failed to asynchronously prepare wasm: CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 21 64 6f @+0

CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 21 64 6f @+0

CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 21 64 6f @+0

error RuntimeError: abort(CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 21 64 6f @+0). Build with -s ASSERTIONS=1 for more info.

Ammo file 'http://localhost:5173/assets/dice-box/ammo/ammo.wasm.wasm' not found. This is required to run the physics simulation. Is your 'assetPath' config option correct and is there an 'ammo' folder with the 'ammo.wasm.wasm' file? Ensure your server has the proper mime type for '.wasm' files.

wasm streaming compile failed: TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.

Uncaught (in promise) InvalidStateError: Failed to execute 'transferControlToOffscreen' on 'HTMLCanvasElement': Cannot transfer control from a canvas for more than one time.

failed to asynchronously prepare wasm: CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 21 64 6f @+0

CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 21 64 6f @+0

CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 21 64 6f @+0

error RuntimeError: abort(CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 21 64 6f @+0). Build with -s ASSERTIONS=1 for more info.

Ammo file 'http://localhost:5173/assets/dice-box/ammo/ammo.wasm.wasm' not found. This is required to run the physics simulation. Is your 'assetPath' config option correct and is there an 'ammo' folder with the 'ammo.wasm.wasm' file? Ensure your server has the proper mime type for '.wasm' files.

Babylon.js v5.57.1 - WebGL2 - Parallel shader compilation

[frankieali]

Hey, I'll see if I can help you out. Incorrect MIME type means your server needs some configuring. What are you using for your server setup? I do all my development and testing with Vite and I don't have to do anything special to serve WASM files. The MIME type is configured correctly out of the box. You also mention running that app in offline mode, which leads me to believe you're trying to get around a fetch call. Issue https://github.com/3d-dice/dice-box/issues/102 mentions using the dice box in an electron app. Is that something you're trying to do?

[PittaPlz]

Hey! Thanks for taking the time to respond and thanks for such a cool project!

I've never really configured anything, just created a vite app with react and run it with npm run dev. That's pretty much it. As for offline mode, I'm seeing more and more problems with that going forward for urnelated reasons, but in the end I'll be converting the app to also run on mobile through a web emulator for offline TTRPG playing. So I don't plan on using electron, no. But then again, seeing more and more issues with that as I move forward.

[frankieali]

I just added a demo project at https://github.com/3d-dice/dice-box/tree/main/demo/react-project. Try running that. All you need to do is npm i then npm run dev and it should work. I also bumped the project to version 1.1.14 to fix the browserlist issue in the package.json file that React was complaining about.

[PittaPlz]

That worked! Merged my app with that demo project and it totally works now! To someone like me that is beyond sorcery. Thanks a bunch! <3

[frankieali]

Awesome. Glad it worked. Sometimes, getting the initialization order correct is the trick. You'll notice that the DiceBox class is created outside the App component but init runs inside the component. I think that's the key to mixing this vanilla JS module with React. If you're interested in seeing other React demos I also have these: https://codesandbox.io/p/sandbox/react-roller-attributes-v1-1-3-65uqhv?file=%2Fsrc%2FApp.js https://codesandbox.io/p/sandbox/react-roller-advanced-notation-v1-1-3-rz0nmr?file=%2Fsrc%2FApp.js