Broken/outdated 'this' in class properties

[awv-inf]

Hot loader currently seems to confuse 'this' in class property methods. It points at an older class instance without refs or locals.

class App extends React.PureComponent {
    componentDidMount() {
        // 'view' gets stored and is available
        this.view = this.refs.view.getInterface();
        this.view.scene.add(this.props.session.pool);
    }
    onDoubleClick = () => {
        // here 'this' points to a version of 'App' without 'view' and 'this.refs' is empty
        this.view.updateBounds().controls.focus().zoom();
    }
    render() {
        return (
            <main className={this.props.classes.main}>
                <Canvas
                    style={{ position: 'absolute', top: 0, left: 0 }}
                    onDoubleClick={this.onDoubleClick}>
                    <View ref="view" up={ [0, 1, 0] } />

Environment

React Hot Loader version: 3.0.0-beta.6

Run these commands in the project folder and fill in their results:

1. node -v: v7.2.0
2. npm -v: 3.10.5

Then, specify:

1. Operating system: Windows 10
2. Browser and version: Chrome beta 55

[calesce]

Thanks for the issue. Can you share your Babel config?

[awv-inf]

Certainly, https://gist.github.com/awv-inf/257464c57fd19b656858c6ffd5a87c91

The babel config is in the first blob. It applies to env.dev only, where react-hot-loader is inlined.

[calesce]

You may need to add transform-es2015-classes (or es2015 preset) to your dev config, as this could be related to #313.

[awv-inf]

This worked indeed, thanks! With the downside of course that now we have transpiled classes. Is this a browser bug or will it get fixed in RHL?

[calesce]

Fixed in RHL. It seems most likely that the issue is at the react-proxy layer. Its tests are run against both transpiled and built-in classes, so I'm not sure what's causing it to fail.

[calesce]

Going to close this out because you got it working and the underlying issue is #313.