Having a little trouble with widgets in React

[RonyKordahi]

I'm back with another head scratcher!

I've been trying to set up a widget to have a custom popup when I create an annotation, and I've followed the guide in the documentation but I can't set it in my index.html file so I've been trying to set it through my React component like so:

 useEffect(() => {
        viewer && viewer.destroy();

        const initViewer = OpenSeaDragon({
            id: "openSeaDragon",
            prefixUrl: "openseadragon-images/",
            animationTime: 0.5,
            blendTime: 0.1,
            constrainDuringPan: true,
            maxZoomPixelRatio: 2,
            minZoomLevel: 1,
            visibilityRatio: 1,
            zoomPerScroll: 2,
            zoomPerClick: 1, },
        })

        setViewer(initViewer);

        const config = {
            readOnly: false,
            disableEditor: false,
            disableSelect: false,
            widgets: [
                { widget: HelloWorldWidget, force: "React" },
                "COMMENT",
                "TAG",
            ]
        }

        setAnno(Annotorious(initViewer, config));

        return () => {
            viewer && viewer.destroy();
            anno && anno.destroy();
        };
    }, []);

The code for HelloWorldWidget is copy pasted from the guide linked above.

When I try to create an annotation I get met with this error message:

// Cannot add property __, object is not extensible

Not quite sure what to do here. Any ideas?

[rsimon]

I fear you may have run into this issue: https://github.com/annotorious/annotorious/issues/202#issuecomment-1221365817

The bad new is that it's pretty clunky to do custom React widgets. This is likely not going to change until Annotorious v3 is out. (Already working on it, but still at least 6 months away.) Once Annotorious 3 is out, there will be proper framework wrappers out of the box (for React and Svelte from my end, but hopefully other frameworks too from contributors).

[RonyKordahi]

Ah that makes sense. No worries then!