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.

[junkboy0315]

@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;