presumed: Strict mode react issue on load

[marc0n3]

Describe the bug I've developed a typescript wrapper for the component. I suspect that, because strict mode react invoke effects twice, the initialization process of TuiImageEditor fails.

I've an error on
this._invoker.on(EXECUTE_COMMAND, function (command) { return _this2.ui.fire(EXECUTE_COMMAND, command); });

when image is first loaded. Ui is null.

I suppose that destroy is resetting it.

To Reproduce `import React, {useEffect, useRef} from "react"; import TuiImageEditor from "tui-image-editor"; import "tui-image-editor/dist/tui-image-editor.css"; import "tui-color-picker/dist/tui-color-picker.css";

import "./imageEditor.scss";

export const ImageEditor = ({imageDataUrl}: { imageDataUrl: string }) => { const containerRef = useRef<HTMLDivElement>(null); const imageEditorRef = useRef<TuiImageEditor | null>(null);

useEffect(() => {
    const containerElement = containerRef.current;
    if (!containerElement) throw new Error("invalid ref");
    const editorInstance = imageEditorRef.current = new TuiImageEditor(containerElement, {
        usageStatistics: false,
        includeUI: {
            loadImage: {
                path: imageDataUrl,
                name: "image",
            },
            menu: ["shape", "filter", "text"],
            initMenu: "filter",
            uiSize: {
                width: "100%",
                height: "100%",
            },
            menuBarPosition: "left",
            
        },
        cssMaxWidth: 700,
        cssMaxHeight: 500,
        selectionStyle: {
            cornerSize: 20,
            rotatingPointOffset: 70
        },

    });
    /*/!**
     * load image
     *!/
    editorInstance.on("ready",()=>editorInstance.loadImageFromURL(imageDataUrl,"Image"));*/

    /*  const resizeObserver = new ResizeObserver(() => {
          const editorInstance = imageEditorRef.current;
          if (editorInstance && containerElement)
              editorInstance.resizeCanvasDimension({
                  width: containerElement.clientWidth,
                  height: containerElement.clientHeight
              });
      });*/


    return () => {
        editorInstance.destroy();
        imageEditorRef.current = null;
    };
}, []);


return <div className={"image-editor"} ref={containerRef}/>;

};`

Expected behavior I expect initialization to stop on destroyed components.

[Arvin8613]

I also encountered the same bug with strict react mode. :(

[socnacom]

Hi ! did you find a reasonable workaround ? I have to disable StrictMode every time I want to work with image editor, and it's not really satisfying. See you