React.createElement: type is invalid

Hi! Thank you for creating this plugin! I’m currently trying to implement it in my project, but I keep getting the following error: warning.js:33 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of AddEditLinkModal.

Perhaps I’m implementing it the wrong way? I’m using webpack for my assets. I’ve put “react-image-crop” inside my “vendor” entry.

Inside my react component I’ve done the following import: import ReactCrop from "react-image-crop"; And the logic I created:

public state: State = {
	crop: {
		x: 0,
		y: 0,
		aspect: 10 / 4,
		width: 50,
	},
};
constructor(props: Props, state: State) {
	super(props, state);

	this.onCropImageChange = this.onCropImageChange.bind(this);
}

public handleImgSelection(e: any) {
	e.preventDefault();
	const {setImg} = this.props;

	const reader = new FileReader();
	const file = e.target.files[0];

	reader.onloadend = () => {
		setImg(file, reader.result);
	};

	reader.readAsDataURL(file);
}

public onCropImageChange(crop: State["crop"]) {
	this.setState({crop: crop});
}

Inside my render I’m rendering the following ReactCrop: <ReactCrop crop={this.state.crop} src={imgPreview} onChange={this.onCropImageChange} />

The imgPreview is the reader.result which is saved to my redux store.

[maxsize]

Hi guys, I have the same problem here, I am using ts in my project, after some research, I find that I have to do something like this to make it work: import * as ReactCrop from 'react-image-crop'; render() { const Component = (ReactCrop as any).default; return ( <Component src={src} ... /> ) } It seems like something is wrong in the definition file. help this helps.

[maxsize]

Hi @DominicTobias , I am using 6.0.4.