Error: Wheel.image must be a HTMLImageElement or null

[datisekai]

Environment:

Framework: Next.js App Directory
Language: TypeScript
Library: spin-wheel
Description: I am encountering an issue when trying to use the image and overlayImage fields in the spin-wheel library. The specific error message I receive is:

Error: Wheel.image must be a HTMLImageElement or null

Steps to Reproduce:

Implement the spin-wheel library in my Next.js application.
Attempt to set the image and overlayImage fields with images using the new Image() constructor.
Observe the error when trying to render the wheel.
Current Workaround: I have tried to initialize the image using a function to create a new HTMLImageElement and assign it to the props. However, I encountered a bug where the image does not display on the first load. Instead, it only appears after a few seconds, and only after clicking on the wheel.

Repository: You can find my source code here: Lucky Wheel Next

Expected Behavior: I expect the images to load properly on the initial render without needing to click on the wheel.

Additional Information: If you need further information or details, please let me know. I appreciate your help!

[GordonZed]

I would venture to guess the image isn't getting a chance to finish loading before the initial rendering of the wheel. You may want to implement a simple pre-loader, and only instantiate the wheel once all required assets are definitely loaded. Aside from that, the relevant code is as simple as this:

const overlay_img = new Image();
overlay_img.src = '/imgs/overlay.png';
const props = {
    ...
    overlayImage: overlay_img
};