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 [email protected] 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: https://github.com/abdulrahman-khankan/reactable/commit/e4eebcb9c2739e8375d68937376c715100993bf5

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'],
        },
      },
    })],
  },

[lciolecki]

Thanks man! You made my day! :)

[spoeken]

Does anyone know how to fix this?

[kalimuthu123]

thead is not rendering at all here showing the header name as blank

[CodyReichert]

Hit the same issue on 1.1.0

Downgrading to 1.0.2 was enough to fix it in development and production builds for me without the UglifyJS changes.

[NikunjPansuriya]

I have tried the below configuration with webpack version 5.25.0 and it's worked for me.

optimization: {
  minimizer: [(compiler) => {
    return () => {
     return {
      terserOptions: {
        mangle: {
          reserved: ['Td', 'Tr', 'Th', 'Thead']
        }
      }
     }
    }
  }]
 }

[alexkhismatulin]

thanks @NikunjPansuriya, your solution helped me make reactable work with react 17

[arthurmenezesb]

I have tried the below configuration with webpack version 5.25.0, and it's worked for me.

optimization: {
  minimizer: [(compiler) => {
    return () => {
     return {
      terserOptions: {
        mangle: {
          reserved: ['Td', 'Tr', 'Th', 'Thead']
        }
      }
     }
    }
  }]
 }

It worked when I needed to migrate my React project from 15.6.2 to 16.14.0 and Webpack from 3.8.1 to 5.75.0.