No default export found in module import/default

[nypinstripes]

Hey @dominictobias this lib looks great & really want to use it, but when i try to import it into my components i'm getting this error

error No default export found in module import/default

any advice would be appreciated thanks.

[dominictobias]

Hi @nypinstripes can't believe I haven't seen this before but while I fix the module not having a default export, you should be able to do import * as ReactCrop from 'react-image-crop' or perhaps import { ReactCrop } from 'react-image-crop. Actually if you can let me know the result of ReactCrop when doing these that would be helpful (webpack seems to work ok even without a default export, I'm guessing because there is an export called ReactCrop)

[dominictobias]

What JS bundler are you using?

[nypinstripes]

@dominictobias webpack 4.10.2 , wild card import with the alias seems to give a parsing unexpected token error.

[nypinstripes]

@dominictobias sorry that's if i use the braces, without the braces i get a no exported names found in module.

[dominictobias]

If you console.log ReactCrop what does the browser say? There are definitely things exported from that module!

[nypinstripes]

@dominictobias i get the RC object, maybe a linter settings issue?

[dominictobias]

I'm quite surprised about seeing most of those there as I'm only exporting a few of them but shouldn't do harm. I can also see default there so I would expect import ReactCrop from 'react-image-crop' to also work, if you console log that does it work?

[nypinstripes]

@dominictobias

[dominictobias]

Ok so it's working, was wondering why more people weren't complaining 😅Seems there is something up with your eslint config. Try removing it from the project, updating eslint globally, and running eslint --init

[nypinstripes]

@dominictobias that might work, but unfortunately i have to keep it in my project, for the time being im fine with just having eslint ignore the line, and continue on my way.. thanks again

[dominictobias]

No prob

[Rasbin]

To fix by supressing this error message, the following code should work. But, there must be other better ways to solve this.

/*eslint-disable */

//suppress all warnings between comments
import ReactCrop from 'react-image-crop';

/*eslint-enable */

[ghost]

Hello all,
I'm also experiencing this same error

[dominictobias]

This is due to this module exporting using ES5 module.exports, when I tried to update it to ES6 exports it caused an issue when using this module globally so have to tread carefully. You can read about this issue here: import-js/eslint-plugin-import#558

Nothing is breaking but the only way to fix this is to export the module using ES6 export.

PS as that thread says you can ignore imports using regex in eslint settings so it won't error when importing this module without the need for an eslint comment in the code.

[dominictobias]

Fixed in v6.0.0

[dominictobias]

Note: import with import ReactCrop from... not import * as ReactCrop from... in v6

[enessoylu]

@dominictobias If I am not mistaken, in TypeScript I have to use like this:

Any plan to fix type definitions?

[JKaypa]

@sekoyo I am also having this issue at this time. Do you know what is happening, any suggestion would be appreciated. Thanks

[dominictobias]

@sekoyo I am also having this issue at this time. Do you know what is happening, any suggestion would be appreciated. Thanks

What version are you using?

[JKaypa]

[dominictobias]

@sekoyo I am also having this issue at this time. Do you know what is happening, any suggestion would be appreciated. Thanks

Hard to say as there is some issue with whatever you're using to compile your code. centerCrop is definitely exported in that version and is being used on the CodeSandbox example. Also I don't know if it's just a TS error, or the function is actually undefined for you.

[JKaypa]

I had to do this. At least solved the error

[JKaypa]

Thank you for your answer and support