Failed to execute 'transferControlToOffscreen' on 'HTMLCanvasElement':

[clevett]

InvalidStateError

Failed to execute 'transferControlToOffscreen' on 'HTMLCanvasElement': Cannot transfer control from a canvas for more than one time.

I've been running into this error since I started experimenting with the library. Do you have any experience with this error in your apps ?

[frankieali]

Yes, you will see this issue in Firefox in developer mode. Firefox will work with the final build files, but not the dev files because of how vite handles modules. This can also happen if you're making two or more dice boxes but have not specified different dom elements or id's for initialization.

[clevett]

I'm using Chrome. Thanks for the feedback. Let me try moving my init and see if that can resolve this.

Edit: I think I found a solution using Providers & Context. I'll post an update on it here if it works so anyone else bringing the library into a React app can reference it.

[clevett]

It was easier than I expected to solve this in React. I just needed to add a cleanup function to do a .clear() when the component unmounted.

  useEffect(() => {
    return () => diceBox?.clear()
  }, [ diceBox ])

---

For anyone else trying to use this in React this is my setup:

const [ diceBox, setDiceBox ] = useState<any>(null)

  useEffect(() => {
    const Box = new Dicebox("#dice-box", {
      assetPath: '/dice-box/',
      theme: "purple",
    })

    Box.init().then(() =>  {
      setDiceBox( Box )
    } );
  }, [])

  useEffect(() => {
    return () => diceBox?.clear()
  }, [ diceBox ])