Table Rows do not render when using modern React stack

[porteron]

Our project recently upgraded to the most recent version of the React-boilerplate repo. Once we upgraded all the <Tr>s in the tables would no longer render. It only breaks once the project is built, it works in local dev mode. Might be a babel/webpack issue.

Not sure where the incompatibility lies. I saw that reactable is still dependent on react v 0.14.1 which is very very very old.

Probably needs to upgrade at least the react package along with some other things.

We are migrating now to another table package in the meantime.

[JiDai]

Hi,
I have the same problem with react@16.0.0 on dev mode only. I update to 1.1.0 to making this work

[JiDai]

Oops I am sorry, I have not the same problem. The Tr did not not render at all

[abdulrahman-khankan]

I can confirm this issue, sorry about that, I'm working on a fix. In the meanwhile, try 1.0.2

[kristw]

My team project uses this and the behavior we see now is
1.0.2 works for production but not development
1.1.0 works for development not production.

Thank you for working on the fix.

[dpgalloway]

Experiencing the same behavior as @kristw - 1.0.2 doesn't work on dev builds, 1.1.0 doesn't work on prod builds

[simondiep]

Locking to version 1.0.2 worked for me (for production)

[larsmoil]

Same here, seems related to minifying and this commit: e4eebcb

The commit above changes the way Table detects the type of its children to use strings. Minifying the code changes the classnames, meaning the strings Td etc. will not work as intended.

[MustansirZia]

Experiencing the same issue on 1.1.0. Is someone currently working on a fix?
I'm able to run it nicely on 1.0.2 in dev as well as in prod mode.

I'm using a CRA 2.0 boilerplate with react 16.7.0-alpha.2.

[zjye]

I workaround by excluded it from webpack uglify mangle

[lciolecki]

@zjye Can you show how you workaround it by webpack uglify managle?

[zjye]

@zjye Can you show how you workaround it by webpack uglify managle?
UglifyJsPlugin

  optimization: {
    minimizer: new UglifyJsPlugin({
      uglifyOptions: {
        mangle: {
          reserved: ['Td', 'Tr', 'Th', 'Thead'],
        },
      },
    })],
  },

TerserPlugin

 optimization: {
    minimizer: [new TerserPlugin({
      terserOptions: {
        mangle: {
          reserved: ['Td', 'Tr', 'Th', 'Thead'],
        },
      },
    })],
  },