Working WebPack setup with react, typescript and HMR

Question

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.

FWIW, there are numerous issues with HMR + React. It works really well for a certain class of changes (for instance, changing the "render" method) but many other changes don't really fit into react-proxy's view of the world (which basically just tries to proxy a React component). As a simple example, changes to an arrow function will not take effect (see github.com/gaearon/react-proxy/pull/8). Point just being, I would view HMR as more of a helper than a full-blown solution. Sometimes you just need to reload the page. — James Brantly
– James Brantly, Commented Jan 25, 2016 at 13:50
Ah, I didn't know that, I was sort of hoping that it would recognize any change, much like the watch mode. If it is as you say, then it seems kind of useless to me, I mean what's the point if you constantly have to wonder whether you code is wrong or if HMR simply didn't pick up the changes... — Vladimir Rovensky
– Vladimir Rovensky, Commented Jan 25, 2016 at 13:54
I wound up finding confirmation that this is a known limitation. See my answer below. — James Brantly
– James Brantly, Commented Jan 25, 2016 at 13:58

James Brantly · Accepted Answer · 2016-01-25 13:57:55Z

1

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

Does not replace ES7 instance properties

answered Jan 25, 2016 at 13:57

James Brantly

5692 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vladimir Rovensky Over a year ago

Perfect, thanks for clearing up that mystery, at least that gives me some idea as to what I can and cannot expect to work.

Markian Ivanichok · Accepted Answer · 2016-01-24 21:57:18Z

0

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.

answered Jan 24, 2016 at 21:57

Markian Ivanichok

863 bronze badges

1 Comment

Vladimir Rovensky Over a year ago

In general, I was focusing on react-transform, since that's the newer way of doing it. You can see the webpack.config in the repo I referenced (github.com/wmaurer/react-transform-boilerplate-ts). I also tried the one on github.com/keokilee/react-typescript-boilerplate. Both of them have the same issue. I also tried to add the react-hmre preset you mentioned, but still no luck :-(

Collectives™ on Stack Overflow

Working WebPack setup with react, typescript and HMR

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related