This repository was archived by the owner on Apr 8, 2020. It is now read-only.
Repository navigation
This repository was archived by the owner on Apr 8, 2020. It is now read-only.
Hot Module Reloading using typescript only (without babel) doesn't work #498
Description
I read about the new typescript 2.1 release and figured it should be possible to remove babel from my ReactReduxSpa-derived webpack config, which I tried.
It works, but it broke HMR. This seems to be caused by the aspnet-webpack-react module checking explicitly for babel-loader in HotModuleReplacement:
if (loaderConfig.loader && (loaderConfig.loader.match(/\bbabel-loader\b/))
If I change this line to:
if (loaderConfig.loader && (loaderConfig.loader.match(/\bbabel-loader\b/) || loaderConfig.loader.match(/\bawesome-typescript-loader\b/))) {
HMR starts working again. I added a check for awesome-typescript-loader which I use, the original uses ts-loader. My change might break the original config. Not sure how to do this correctly.
Activity
SteveSandersonMS commentedon Jan 16, 2017
I'm not sure I follow how this could be working without Babel. The code you're changing inside
aspnet-webpack-reactis responsible for making sure the Webpack config sets upbabel-plugin-react-transform, which is of course a Babel plugin (and in turn,react-transform-hmr, which is an extension to a babel plugin).If you're not using Babel, are those plugins really executing?
When you say "HMR starts working again", to what extent is it working? When you change a source file and your app updates in the browser, is it still preserving the state of your React components?
I would try to repro your scenario but I don't know how exactly you've removed Babel and configured the TypeScript compiler to replace it.
SteveSandersonMS commentedon Jan 16, 2017
On further consideration, what you're reporting is by design: HMR shouldn't work without Babel, because the implementation depends on
babel-plugin-react-transform, which is a Babel plugin, so I'll close this.If you think we can somehow make it work fully with TypeScript only and not Babel, could you please let us know details of how that works? If your tweak to
aspnet-webpack-reactactually works to the extent of preserving React component states across HMR updates, that would be very interesting, but I can't repro it without knowing how else you've configured your builds. Thanks!