childrenOfType incompatible with projects using react-hot-loader

[liuhelen10]

childrenOfType is currently incompatible with projects using react-hot-loader because of this line:

https://github.com/airbnb/prop-types/blob/master/src/childrenOfType.js#L8

According to the react-hot-loader docs, because React Hot Loader creates proxied versions of your components, comparing reference types of elements won't work. It looks like they provide an areComponentsEqual helper that checks for that (more details here), but I'm not sure if there's a good way to integrate with this.

It looks like there is an open issue on react-hot-loader about this -- curious if you guys have any ideas for a solution or workaround: gaearon/react-hot-loader#304

[ljharb]

Thanks for filing; I’m relatively sure this is just the nature of hot reloading interfering with the referential nature of JS - and i wouldn’t want to use brittle string comparisons, nor depend directly on RHL.

Happy to leave this open while we brainstorm other solutions.

[harrytruong]

Just noting this (in case it helps anyone who comes across this issue too):

• Seems like there was some recent progress in addressing this, but it means upgrading react-hot-loader to at least v4.10.0(beta): Element type comparing gaearon/react-hot-loader#304 (comment)

• An immediate workaround is described in react-hot-loader docs, by using the special cold utility: https://github.com/gaearon/react-hot-loader#disabling-a-type-change-%EF%B8%8F

---

Example:

// `Table` uses `childrenOfType` to assert type `Row` 
import Table, { Row } from '../example/Table';

// leads to a PropTypes validation error, 
// when `react-hot-loader` is enabled:
const Foo = () => {
  return (<Table><Row /></Table>);
}

To fix the issue on a component-by-component basis:

import { cold } from 'react-hot-loader';
import Table, { Row as _Row } from '../example/Table';

// avoids printing false errors in non-production env 
// see https://github.com/airbnb/prop-types/issues/39
const Row = cold(_Row);

// no more PropTypes validation error, 
// when `react-hot-loader` is enabled:
const Foo = () => {
  return (<Table><Row /></Table>);
}