#StackBounty: #reactjs #webpack #react-hot-loader "react-hot-loader/babel" breaks my build — why is it needed?

Bounty: 200

As soon as I add "react-hot-loader/babel" to my .babelrc, it breaks my React components.

Specifically, I have some code that looks like this:

export default class Editor extends React.Component {

    componentDidMount() {
        console.log('this.canvas',this.canvas);
        // ...
    }

    setRef = node => {
        console.log('setRef');
        this.canvas = node;
    }

    render() {
        // tabIndex is needed to receive keyboard events -- https://stackoverflow.com/a/12887221/65387
        return <canvas className={this.props.className} ref={this.setRef} tabIndex={0} />;
    }
}

When I run it, I see this in my Chrome dev tools:

setRef
this.canvas undefined

Which is quite strange, because we can see it’s setting this.canvas before calling componentDidMount so I don’t know what react-hot-loader/babel is doing to break that.

Without react-hot-loader/babel, everything works fine, including hot-reloading.

So, my questions are:

  1. What does “react-hot-loader/babel” actually do?
  2. How do I get it to not break my class properties?

This is with React 16.1, react-hot-loader 3, webpack 3.11, babel 6.x


My .babelrc if you want to see that:

{
    "plugins": [
        "transform-object-rest-spread",
        "syntax-jsx",
        "transform-react-jsx",
        "transform-react-display-name",
        "transform-class-properties",
        "transform-function-bind",
        "transform-decorators-legacy"
    ],
    "compact": false,
    "env": {
        "development": {
            "plugins": [
                "transform-react-jsx-self",
                "transform-react-jsx-source",
                [
                    "styled-components",
                    {
                        "displayName": true,
                        "minify": false
                    }
                ]
                // https://stackoverflow.com/q/48857689/65387
                //"react-hot-loader/babel"
            ],
            "presets": [
                [
                    "env",
                    {
                        "targets": {
                            "browsers": "last 2 chrome versions"
                        },
                        "modules": false
                    }
                ]
            ],
        },
        "webpack": {
            "presets": [
                [
                    "env",
                    {
                        "targets": {
                            "node": "current"
                        },
                        "modules": "commonjs"
                    }
                ]
            ]
        }
    }
}


Get this bounty!!!

Leave a Reply