react-hot-loader/babel ломает мою сборку, зачем это нужно?

Как только я добавляю "react-hot-loader/babel" к .babelrc, мои компоненты React ломаются.

В частности, у меня есть код, который выглядит так:

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} />;
    }
}

Когда я запускаю его, я вижу это в своих инструментах разработчика Chrome:

setRef
this.canvas не определено

Что довольно странно, потому что мы видим, что он устанавливает this.canvas перед вызовом componentDidMount, так что я не знаю, что react-hot-loader/babel делает, чтобы сломать это.

Без react-hot-loader/babel все нормально работает, включая горячую перезагрузку.

Итак, мои вопросы:

1. Что на самом деле делает «реагировать-горячий-загрузчик/бабель»?
2. Как заставить его не нарушать свойства моего класса?

Это с React 16.1, react-hot-loader 3, webpack 3.11, babel 6.x

Мой .babelrc, если хочешь это увидеть:

{
    "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"
                    }
                ]
            ]
        }
    }
}