Ad

Working WebPack Setup With React, Typescript And HMR

I'm trying to get WebPack to work with ReactJs components written in Typescript (.tsx) and take advantage of WebPack's hot module replacement. I've found several recipes that describe how to do this, but they all seem to have the same problem - if you have a field on your component class that you use in the render method, then changing it in code does not trigger HMR properly, e.g.

export default class Counter extends React.Component<ICounterProps, ICounterState> {
        ...
    label: string = 'Counter';
    render() {
        return <h1>{this.label}: {this.state.counter}</h1>;
    }
}

If you modify the value of label in code, the page is not updated. I made an issue on GitHub in the first starter project I found, then I tried a bunch more and they all have this issue. This is a big problem - if you can't be sure whether the page will update, it renders the whole HMR kinda pointless. Also, note that this works fine in vanilla .jsx components.

Does anyone have a way to make this work? Any direction would me much appreciated.

Ad

Answer

See the first "known limitation" from https://github.com/gaearon/react-proxy#known-limitations

  • Does not replace ES7 instance properties
Ad
source: stackoverflow.com
Ad