React-table: built ES module is imported wrongly with webpack 4 when node_modules are not transpiled with babel

[capaj]

What version of React-Table are you using?

 "react-table": "^6.8.6",

What bug are you experiencing, or what feature are you proposing?

I've used to run our app with webpack 3. With that, everything worked smoothly. Now I've switched to webpack 4 and when I am in development, the export has double default prop.
Meaning that on erendering any react-table I get this 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: object.

Check the render method of `Query`.
    in Query (created by AdminDashboard)
    in div (created by AdminDashboard)
    in AdminDashboard (created by Route)
    in Route (created by AdminRoutes)
    in Switch (created by AdminRoutes)
    in div (created by AdminRoutes)
    in Router (created by HashRouter)
    in HashRouter (created by AdminRoutes)
    in ApolloProvider (created by AdminRoutes)
    in IntlProvider (created by AdminRoutes)
    in AdminRoutes
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `Query`.
    in Query (created by AdminDashboard)
    in div (created by AdminDashboard)
    in AdminDashboard (created by Route)
    in Route (created by AdminRoutes)
    in Switch (created by AdminRoutes)
    in div (created by AdminRoutes)
    in Router (created by HashRouter)
    in HashRouter (created by AdminRoutes)
    in ApolloProvider (created by AdminRoutes)
    in IntlProvider (created by AdminRoutes)
    in AdminRoutes
printWarning @ warning.js:33
warning @ warning.js:57
createElementWithValidation @ react.development.js:1351
(anonymous) @ AdminDashboard.tsx:110
Query.render @ react-apollo.browser.umd.js:421
finishClassComponent @ react-dom.development.js:13085
updateClassComponent @ react-dom.development.js:13047
beginWork @ react-dom.development.js:13715
performUnitOfWork @ react-dom.development.js:15741
workLoop @ react-dom.development.js:15780
callCallback @ react-dom.development.js:100
invokeGuardedCallbackDev @ react-dom.development.js:138
invokeGuardedCallback @ react-dom.development.js:187
replayUnitOfWork @ react-dom.development.js:15194
renderRoot @ react-dom.development.js:15840
performWorkOnRoot @ react-dom.development.js:16437
performWork @ react-dom.development.js:16358
performSyncWork @ react-dom.development.js:16330
requestWork @ react-dom.development.js:16230
scheduleWork$1 @ react-dom.development.js:16096
scheduleRootUpdate @ react-dom.development.js:16663
updateContainerAtExpirationTime @ react-dom.development.js:16690
updateContainer @ react-dom.development.js:16717
ReactRoot.render @ react-dom.development.js:17000
(anonymous) @ react-dom.development.js:17140
unbatchedUpdates @ react-dom.development.js:16557
legacyRenderSubtreeIntoContainer @ react-dom.development.js:17136
render @ react-dom.development.js:17195
(anonymous) @ admin.js:18
./src/index/admin/admin.js @ admin.js:8149
__webpack_require__ @ admin.js:717
fn @ admin.js:99
(anonymous) @ client:3
0 @ admin.js:8173
__webpack_require__ @ admin.js:717
(anonymous) @ admin.js:784
(anonymous) @ admin.js:787
invariant.js:42 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `Query`.
    at invariant (invariant.js:42)
    at getFiberTagFromObjectType (react-dom.development.js:9647)
    at createFiberFromElement (react-dom.development.js:9607)
    at createChild (react-dom.development.js:11978)
    at reconcileChildrenArray (react-dom.development.js:12229)
    at reconcileChildFibers (react-dom.development.js:12542)
    at reconcileChildrenAtExpirationTime (react-dom.development.js:12902)
    at finishClassComponent (react-dom.development.js:13104)
    at updateClassComponent (react-dom.development.js:13047)
    at beginWork (react-dom.development.js:13715)

When I change

 <ReactTable />

// to

 <ReactTable.default />

everything renders fine again.

Weird thing is that this only happens when I run webpack in mode development. When I switch to production it all works fine even without the .default.

This could be that my webpack config is somehow wrong, but seeing as it only happens with react-table I suspect there might be a bug in the module entry point.

[capaj]

I also experimented with removing "module": "es/index.js",
from package.json locally and that helped too.

[capaj]

so I've figured it out- I had excluded node_modules in my webpack config. Apparently it's not a good practice anymore.

{
        test: /\.(js|ts|tsx)$/,
        use: {
          loader: 'babel-loader',
          options: babelConfig // we don't rely on babel-loader to be able to pickup .babelrc because that fails outside of front-end/src
        }
        exclude: /node_modules/
      },

Although I am not sure about closing this bug, because do we really want to force the consumer of this lib to use babel? Sure most people do, but wouldn't we want to make it as easy as possible for newcomers? IMHO we should when it's possible. I've tried on my namespaced package and it is indeed possible to produce an ES6 module export which does work with webpack even with node_modules excluded. If you want to try it out, install @capaj/react-table. So I'll leave this one open and I'l just rename it.

[orangecoding]

This one is a pretty nasty bug I ran into as well.

Even with excluding the node_modules it doesn't work for me. If I import ReactTable, I'll get an object instead of the default export...

After upgrading react-table to the latest version, I now need to do this...
I was on React-Table 6.7.5 before the import worked ok.

/** <WHAT THE HECK IS GOING ON HERE??> **/
import * as ReactTableBla  from 'react-table';
const ReactTable = ReactTableBla.default.default;
/** </WHAT THE HECK IS GOING ON HERE??> **/

[tannerlinsley]

This feature/issue has been tagged as one that will likely be fixed or improved in the next major release of React-Table. This release is expected to be completed in the next 6 - 8 months. Please see #1143 for more detail. If you believe this feature can be easily fixed, we invite you to fork the project, attempt the fix, and use it until the latest version is available. If the fix is simple enough, we will also consider it as a PR to the current version.