Minified React Error

[princeahmed]

@junkboy0315 @tasnimAlam @janedotbiz @vinyldarkscratch @tim-field I am using the component with gutenberg. It working nice in edit mode, but I am getting the below error after saving.

[tam315]

@princeahmed Upgrade latest React. Otherwise , you are calling hooks conditionally in your code. It's not this component error. https://reactjs.org/docs/hooks-reference.html#conditionally-firing-an-effect

[princeahmed]

Hey, @junkboy0315 @tasnimAlam

Here are my codes of the save method of the Gutenberg. The edit method is working well when I am editing but, after updating the page, the page doesn't load at all and show me the above error.

I am using the latest React version and no hooks in my save method.

Can you please help me by saying what is wrong in the codes?

save():

import {Fragment} from "react";
import ReactCompareImage from "react-compare-image";

/**
 * WordPress dependencies
 */
const {__} = wp.i18n;

const save = ({className, attributes}) => {

    const {
        paddingTop,
        paddingRight,
        paddingBottom,
        paddingLeft,

        marginTop,
        marginRight,
        marginBottom,
        marginLeft,

        border,
        borderColor,
        borderType,
        background,

        backgroundImage,
        gradient,

        dividerColor,
        buttonColor,

        direction,

        beforeImage,
        beforeLabel,
        afterImage,
        afterLabel,

    } = attributes;

    const style = {
        "padding": `${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`,
        "margin": `${marginTop}px ${marginRight}px ${marginBottom}px ${marginLeft}px`,
        "border": `${border}px ${borderType} ${borderColor}`,
        "background": background
    };

    return(
        <Fragment>

            <ReactCompareImage
                leftImage={beforeImage.url}
                leftImageLabel={beforeLabel}
                rightImage={afterImage.url}
                rightImageLabel={afterLabel}
                vertical={'vertical' === direction}
                sliderLineColor={dividerColor}
            />

        </Fragment>
    );

};

export default save;