Typescript-react-starter: Hot reload doesn't work

[nikhilyeole1]

Hot reload works properly with just create-react-app but doesn't work with react-scripts-ts.

I have included following in index.tsx

if ((module as any).hot) {
  (module as any).hot.accept('./App', () => {
    const NextApp = require('./App').default;
    ReactDOM.render(<NextApp />, document.getElementById('root'));
  });
}

Since I am using create-react-app that uses webpack-2, I have tried following also:

if ((module as any).hot) {
  (module as any).hot.accept('./App', () => {
    ReactDOM.render(<App />, document.getElementById('root'));
  });
}

But still it doesn't work. CSS hot reload works btw. I also converted my App component to pure function instead of class but to no avail.

Following are the versions:
create-react-app - 1.3.3
react-scripts-ts - 2.4.0

Please help!

[NeekSandhu]

Did you try this one https://github.com/gaearon/react-hot-loader ?

[nikhilyeole1]

@NeekSandhu Yes I know that project. But for that I will need to eject :(

[NeekSandhu]

Well a fragile and dirty way would be go inside node_modules/react-scripts and make manual adjustments (definitely fragile), but then again.

A better solution would be to fork react-scripts and make adjustments to your liking.

create-react-app team doesn't look in the state to have this natively integrated anytime soon https://github.com/facebookincubator/create-react-app/pull/110

[Timer]

I would advise against ejecting to use react-hot-loader, it's simply too unstable.
You should stick to the defaults create-react-app provides until we ship hot reloading by default.

Hot reloading is currently blocked by some trivial project bugs and a bug in chrome, but coming soon: https://github.com/facebookincubator/create-react-app/pull/2304.

We're hopefully also adding support for TypeScript soon, so users no longer need to use the community-maintained react-scripts-ts fork.

[nikhilyeole1]

Thanks @Timer for clarification. Looking forward to get the TS support soon 👍

[nikhilyeole1]

@Timer Found the solution. I replaced ts-loader with awesome-typescript-loader and hot reloading works now. I had to eject to debug/try things. I will use https://github.com/timarney/react-app-rewired to customize my project to use awesome-typescript-loader without ejecting. 👍

[Timer]

Sounds good, @nikhilkh! While we don't promise react-app-rewired won't ever break, we try our best to remain compatible with it -- so maybe expect a few breaks every once and awhile.

I replaced ts-loader with awesome-typescript-loader and hot reloading works now

This is good to hear! We chose awesome-typescript-loader over ts-loader for our TypeScript support.

[VRspace4]

Any updates on integrating hot module reloading into the create-react-app? Thanks.

[jackson-]

Agreed @VRspace4. Is this something we should see implemented soon?