CODEWITHSUNDEEP
javascriptreactjstypescriptwebpackwebpack-hmr
Vladimir Rovensky
Vladimir Rovensky

Reputation: 4704

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.

Upvotes: 2

Views: 900

Answers (2)

James Brantly
James Brantly

Reputation: 571

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

  • Does not replace ES7 instance properties

Upvotes: 1

Markian Ivanichok
Markian Ivanichok

Reputation: 86

Can you upload your webpack's config?

And what package exatly are you using to power Webpack's HMR for React's components? react-hot or babel-plugin-react-transform ?

If you use Babel 6 I would recommend to use babel-preset-react-hmre, which works well for me.

Upvotes: 0

Related Questions