Default export not working with react 16 and Webpack 4

[bring2dip]

Do you want to request a feature or report a bug?

• I found a bug
• I want to propose a feature

What is the current behavior?

Error :
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

This is because the Dropzone is imported as {default: function} which is an object.

import Dropzone from 'react-dropzone'
//not working
<Dropzone />

//working
<Dropzone.default />

If the current behavior is a bug, please provide the steps to reproduce.

What is the expected behavior?

If this is a feature request, what is motivation or use case for changing the behavior?

Please mention other relevant information such as the browser version, Operating System and react-dropzone version.

React version: 16.4.2
Dropzone version: 4.3.0
Webpack version: 4.16.5

Webpack mentions this in their migration guide
esm and non esm import

[loopmode]

I don't think this is a react-dropzone issue, but rather an issue with webpack 4 or your specific setup..

I just tried out with react@16.4.2, react-dropzone@4.3.0 and webpack@3.8.1 (create-react-app), and it works just fine.
Also, the code does a perfectly normal export default and it's up to the consumer or env to interpret it correctly.

About the linked change in webpack behaviour: I think that's about import() as a function, and not about import as a statement.
(import('react-dropzone').then(({default: Dropzone}) => { ... }) or const {default: Dropzone} = await import('react-dropzone');

[Nodman]

Please see #554