Search code examples
typescriptwebpackwebpack-hmr

Typescript and HMR not working

I have front-end app built with Typescript, ReactJS and Webpack.
I am trying to enabling HMR.
These are starting scripts 

"build": "NODE_ENV=production $(npm bin)/webpack --watch",
"dev": "$(npm bin)/nodemon --exec \"$(npm bin)/ts-node\" ./server/server.ts || npm run build",

This is my ts-loader

{ test: /\.tsx?$/, loader: 'awesome-typescript-loader' }

And my dev-server configuration

if (NODE_ENV === 'development') {
  let webpack = require('webpack')
  const webpackConfig = require('../webpack.config')
  const compiler = webpack(webpackConfig)

  app.use(require('webpack-dev-middleware')(compiler, {
    noInfo: true, publicPath: webpackConfig.output.publicPath
  }))
  app.use(require('webpack-hot-middleware')(compiler))
}

I am not able to get over the error

[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.
Solution

  • Had the same problem, and fixed it by adding react-hot-loader, which can be install using npm install --save-dev react-hot-loader.

    Your config should be like this:

    { test: /\.tsx?$/, loaders:['react-hot', 'awesome-typescript-loader'] }