Enabling 'react-hot' on typescript project

[Aranir]

Thank you for the template, it is very helpful.

There is just one thing I can't figure out yet, how can I simply add the 'hot-reloading' to the project?

I ejected it, added the react-hot-loader package with yarn and modified the loaders:

        {
            test: /\.(ts|tsx)$/,
            loaders: ['react-hot', 'ts'],
            include: paths.appSrc

        },

But it seems still to reload the whole page if I change a component.

Any help would be appreciated.

[wmonk]

I have had react-hot-loader@3 working with standard ES6, but haven't tried with TS. I know there is definitely more configuration than just adding the loader like you have done which looks to be best described here - however, i'm not sure how this will work with typescript as it relies on a babel plugin.

[Aranir]

I tried with react-hot-loader@3 (current beta version), but in typescript I don't find module.hot.

if (module.hot) {
  module.hot.accept('./containers/Root', () => {
    render(
      <AppContainer
        component={require('./containers/Root').default}
        props={{ store }}
      />,
      document.getElementById('root')
    );
  });
}

Any idea where i can get the definition for module.hot?

[wmonk]

This typing looks like it includes the neccessary definitions to enable module.hot

[wmonk]

I just had a quick play, and made the changes to get hot-reloading working, you can see the repo and commit here.

You will need to replace @types/node with @types/webpack-env as above. And install the other deps required by react-hot-loader@3.

I'm going to close this issue, as I think the above should be enough to get this working for you. But, want to keep react-scripts-ts as close to react-scripts as possible, so hot-reloading won't be adopted until it it's in the original repo.

[Aranir]

It nearly works. As long as I don't need to use the @types/node definition files in the project.

Unfortunately many libraries (written in typescript) require @types/node to be installed which then clashes with webpack-env as for example require is redefined.

I guess there is currently no fix for this...

[wmonk]

@Aranir just got back to work, and found the way it was handled here, hope this helps:

export interface WebpackNodeModule extends NodeModule {
  hot: {
    accept: (name: string, handler: () => void) => void
  };
}

import { WebpackNodeModule } from './typePatches/webpackNodeModule';

if ((module as WebpackNodeModule).hot) {
  // do stuff
}

it's not ideal, and is quite hacky, but would allow you to carry on using the @types/node definitions with HMR.

[cescoferraro]

@wmonk @Aranir
If its a webpack build, module is there. Just shush typescript and you are good to go.

declare const module:any

[subev]

yarn add "@types/webpack-env" and you should be all set

[kerwynrg]

I followed @gaearon recomendations in
https://github.com/gaearon/react-hot-loader#add-babel-after-typescript

and code from
https://github.com/strothj/react-app-rewire-typescript-babel-preset/blob/master/packages/rewire/rewireWebpack.ts

And I succeed with https://github.com/wmonk/create-react-app-typescript hot loader

This is what I did, hope it helps.

https://gist.github.com/kerwynrg/0ecf4d53345585e77b3fa694bad60d4d

[SeanRoberts]

@kerwynrg Thanks for sharing this. I still can't get it working though, my app just reloads and I don't get anything in the console from HMR. Would you mind sharing what your root/index component looks like? Did you have to add a .babelrc or anything else not covered in the gist? Thanks again for sharing, would really like to get this working!

[kerwynrg]

@SeanRoberts I updated the gist with mi Root and configureStore for dev environment, It includes some redux-saga code but if you don't use it, you can omit it.

Sometimes it inject code on demand, some other times app reloads to load, I don't remember what are the scenarios when this happens.

[SeanRoberts]

Thanks @kerwynrg, this looks a lot like what I have so I think something else in my stack (possibly another rewire package) might be causing the issue.

[kerwynrg]

@SeanRoberts What package are you using?