Problem using react-table v7 in rails app

[edsinclair]

Apologies if this is not the correct place for this question. I'm trying to use react-table v7 in a rails application and cannot seem to resolve the error pasted below. I have gotten react-table v7 working outside of a rails app, so I suspect it is likely a webpack or babel configuration issue, but I haven't been able to isolate it further. Any help or pointers would be appreciated. I pushed a repository that reproduces the error here: https://github.com/edsinclair/rails-react-table-test

Thanks in advance.

Uncaught TypeError: Cannot read property 'useLayoutEffect' of undefined
    at react-table.development.js:253
    at react-table.development.js:6
    at Module../node_modules/react-table/dist/react-table.development.js (react-table.development.js:7)
    at __webpack_require__ (bootstrap:19)
    at Object../node_modules/react-table/index.js (index.js:4)
    at __webpack_require__ (bootstrap:19)
    at Module../app/javascript/components/App.jsx (bootstrap:83)
    at __webpack_require__ (bootstrap:19)
    at Module../app/javascript/packs/react_table_sort.jsx (makeData.js:40)
    at __webpack_require__ (bootstrap:19)

[ericberens]

Not knowing much about webpacker, I would venture to say the culprit is in https://github.com/rails/webpacker/blob/master/package/rules/node_modules.js. Comparison to how CRA does it: https://github.com/facebook/create-react-app/blob/master/packages/babel-preset-react-app/dependencies.js

[knightbk]

I was able to re-produce this issue outside of Rails and outside of CRA using a custom webpack setup. There is definitely some webpack or babel config causing this to work / not work.

[ajaiy]

I am facing the exact issue as well @edsinclair
Rails Application with react-table

[knightbk]

Aha. I think I figured it out. @edsinclair @ajaiy

I'm pretty sure its because Webpacker compiles node modules by default: https://github.com/rails/webpacker/blob/master/docs/v4-upgrade.md#excluding-node_modules-from-being-transpiled-by-babel-loader

Following the guide in that wiki, if you make the following change to https://github.com/edsinclair/rails-react-table-test/blob/master/config/webpack/environment.js it should work?

const nodeModulesLoader = environment.loaders.get('nodeModules');
if (!Array.isArray(nodeModulesLoader.exclude)) {
  nodeModulesLoader.exclude = nodeModulesLoader.exclude == null ? [] : [nodeModulesLoader.exclude];
}

nodeModulesLoader.exclude.push(/react-table/);

[knightbk]

This may cause some issues in IE11? Not sure I didn't test or look there.

[edsinclair]

@knightbk Thanks for finding that. I tried it out and it is working fine in Chrome and Firefox.

[knightbk]

Also @edsinclair I did end up cursory testing this in ie11 and it appeared to work.