Different appearances of components when using react-hot-loader

[wdiu]

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: gaearon/react-hot-loader#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.

[elbrus]

Any update on this?

I have similar issue with ComposedModal component. There is a check on line 67, which fails when RHL is used.
It's annoying as now I need to add two events to check for modal closing: closeModal and buttonOnClick. One works without RHL, another with RHL.

[stale]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. Thanks for your contributions.

[wdiu]

@joshblack, Is this really "won't fix"?

Hot loading is very important for development use.

[dakahn]

@wdiu That 'Wont fix' label was applied by our stale bot. Sorry!

That said -- would it be possible to provide us with some sort of testable example of what you're talking about here so we can triage and look into a solution?

[wdiu]

The easiest way to reproduce this is to enable hot loading in your development webpack.js.

In the entry array, add

        'react-hot-loader/patch',
        'webpack/hot/only-dev-server'

In the plugins array, add
new webpack.HotModuleReplacementPlugin(),
In the devServer object, add
hot: true,

A more complete webpack.js might look like

module.exports = {
    entry: [
        'babel-polyfill',
        'react-hot-loader/patch',
        'webpack/hot/only-dev-server',
        'webpack-dev-server/client?http://0.0.0.0:8080',
        './startingFile.jsx'
    ],

    ... //whatever you had in your webpack before

    devServer: {
        hot: true,
        ... //whatever you had here before
    },

    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NamedModulesPlugin(),
    ],

    watch: true
}

[dakahn]

@joshblack @emyarod any insight into this?

I'll try and recreate the error if I can

[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: carbon@us.ibm.com. Thanks!