comparing classes with webpack2 and react

Question

Before I upgraded to webpack 2, i could do the following:

   children: PropTypes.arrayOf((propValue, key) => {
      const type = propValue[key].type
      if (type !== Column && type !== ColumnGroup) {
        throw new Error('<Table> can only have <Column> and <ColumnGroup> as children.')
      }
    })

This no longer seems to work using webpack 2. The error always gets thrown. What is the proper way to compare react classes using webpack 2?

This is my .babelrc

{
  "presets": [
    ["es2015", {"modules": false}],
    "react"
  ],
  "plugins": [
    "transform-class-properties",
    "transform-object-rest-spread",
    "react-hot-loader/babel"
  ]
}

UPDATE:

It has something to do with setting the NODE_ENV equal to something other than production. I'm able to reproduce this here: https://github.com/dadamssg/react-class-bug/tree/master

Answer 1

Apparently this is known issue caused by react hot loader.

https://github.com/facebook/react/issues/9652

I worked around it by adding my own static variable on the component classes and comparing that.

   children: PropTypes.arrayOf((propValue, key) => {
      const {_componentClass} = propValue[key].type
      if (_componentClass !== Column._componentClass && _componentClass !== ColumnGroup._componentClass) {
        throw new Error('<Table> can only have <Column> and <ColumnGroup> as children.')
      }
    })

Not ideal, but it works.