Hot reloading of TypeScript and React

[maiermic]

I use TypeScript and React and I'd like to hot reload my TypeScript modules, but I get a warning in the console:

[HMR] The following modules couldn't be hot updated: (Full reload needed)
This is usually because the modules which have changed (and their parents) do not know how to hot reload themselves. See http://webpack.github.io/docs/hot-module-replacement-with-webpack.html for more details.
[HMR]  - ./src/MyModule.tsx

I can solve this problem by modifying the TypeScript loader in webpack.config.js

var getConfig = require('hjs-webpack');
var config = getConfig({ ... });

var tsLoaderConfig = config.module.loaders.find(loaderConfig =>
  loaderConfig.loaders && loaderConfig.loaders[0] === 'awesome-typescript-loader'
);

tsLoaderConfig.loaders = [
    'react-hot',
    'babel?' + JSON.stringify({
      presets: ['react', 'es2015'],
    }),
    'awesome-typescript-loader'
  ];

config.resolve.extensions = config.resolve.extensions.concat(['.ts', '.tsx']);

module.exports = config;

However, I expected that hot reloading of TypeScript would work out of the box in hjs-webpack. I would really appreciate this feature.

[lukekarrys]

@maiermic Is the babel part of the loader also required for HMR to work? Have you tested this at all with the new version of react-hot-loader (v3)? It would be great to get typescript+HMR to work out of the box, but I don't have experience with typescript, and hjs-webpack will get updated to react-hot-loader@3 pretty soon, so I don't want to make changes if they won't work with the new version.

[maiermic]

The babel part is not necessary. I have tested it with [email protected]. Let's wait for the stable release of react-hot-loader@3.

[wolfeidau]

Any update on this, using the workaround posted above and would love to remove that 😄

Cheers!

[maiermic]

Still waiting for the stable release of react-hot-loader@3.

[angularsen]

@maiermic I'm getting Module not found: Error: Cannot resolve module 'react-hot' when trying your workaround. I have copied the config exactly. Any ideas?

[angularsen]

Apologies, installing react-hot-loader to the latest version 1.3.0 fixed it.