Different appearances of components when using react-hot-loader

As stated in https://github.com/carbon-design-system/carbon-components-react/blob/master/README.md: “1.These components require the use of Webpack in your project”

Typically, development webpack configurations use react-hot-loader while production webpack configurations don’t.

But carbon-components-react does not work with react-hot-loader, resulting in totally different appearances / behavior in development and production.

For example, in TableBody.js: if (child.type === TableRow)

This will work fine in production where there is no hotloading, but not in development when there is hotloading.

The reason: https://github.com/gaearon/react-hot-loader/issues/304

The fix is explained in the section on Checking Element types at https://github.com/gaearon/react-hot-loader/blob/master/README.md

This issue is similar to https://github.com/carbon-design-system/carbon-components-react/issues/857 but the difference is that it is not just the childrenOf and childrenOfType that are failing; components appear totally different.

[asudoh]

Some sources say that if (child.type === <TableRow>.type) (meaning, getting the type of an instantiated version instead of direct React component ref) solves this problem, but we don’t have a test case for this. That said, as @dakahn brought up, a test case is an important piece.

[carbon-bot]

Hi there! 👋 If you’re wondering why this issue was moved, we’re currently updating our repo structure so that every package is found in the same project.

This should not have any impact for you, but we wanted to give you a heads up in case you were wondering what is going on. If you have any questions, feel free to reach out to us on Slack or contact us at: [e-mail]. Thanks!