React.createElement: type is invalid

[otakueadwine]

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.

[sekoyo]

Hi,

Typically something you are importing is undefined. Did you figure this out? You shouldn't need to add this to a vendor option if you're referring to build tools like webpack, just the import should do. If below the import you do console.log(ReactCrop) what does it give?

[danielasy]

Hello, I was getting a similar error when importing with import ReactCrop from 'react-image-crop'. ReactCrop would be set to undefined.

Using import * as ReactCrop from 'react-image-crop' instead seemed to do it.

[sekoyo]

Hm strange, are you guys using webpack/babel in your projects or something else?

[sekoyo]

Closing due to inactivity

[sujayjaju]

@dominictobias

I am seeing the same thing. Though import * as ReactCrop from 'react-image-crop' did not work for.
onsole.log(ReactCrop) returns an object{}

How can I help debug?

[ssxv]

using a very specific version 5.0.0 worked for me.

[sekoyo]

@sujayjaju You shouldn't do import * as this will return an object of all exports, instead import the default export with import ReactCrop from 'react-image-crop' as per the readme.

@ssxv How are you importing the component?

[ssxv]

I m doing
import * as ReactCrop from 'react-image-crop';

as suggested by above comments

[sekoyo]

@ssxv in v6 do import ReactCrop from 'react-image-crop', this sometimes didn't work in previous versions due to the library being exported as a CommonJS module depending on your build setup

[sujayjaju]

@dominictobias Yes, I am using import ReactCrop from 'react-image-crop' - I also tried import * since that seemed to work for @danielasy

console log for ReactCrop return Object {} in both cases. The error states:
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

[sujayjaju]

So I tried deleting node_modules and doing a fresh install.
Got this error with ReactCrop:

ERROR in ./node_modules/react-image-crop/lib/ReactCrop.js 177:8
Module parse failed: Unexpected token (177:8)
You may need an appropriate loader to handle this file type.
|
| class ReactCrop extends PureComponent {
>   state = {}
|
|   componentDidMount() {
 @ dll reactBoilerplateDeps

@dominictobias Does that provide a clue?

[sekoyo]

It seems like your build tool is picking up the jsnext:main entry which is ES6 code - https://github.com/DominicTobias/react-image-crop/blob/master/package.json#L7 instead of the normal "main" entry. I think I will remove that entry entirely as I've recently read it causes problems like this.

[sekoyo]

For now try import ReactCrop from 'react-image-crop/dist/ReactCrop'

[sekoyo]

@sujayjaju please try 6.0.1

[sujayjaju]

@dominictobias
Thanks for getting back so quickly. 6.0.1 works!

[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.

[sekoyo]

Hi Max, what version are you using?

…

On Thu, 1 Nov 2018 at 03:46, Max ***@***.***> wrote: 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. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#150 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAuZ-rCfZWsFtVQk5OyFEqdVmAMfXhy5ks5uqm6UgaJpZM4RUSXM> .

[maxsize]

Hi @dominictobias , I am using 6.0.4.