I have a front-end application developed using Typescript, ReactJS, and Webpack.
I am currently working on enabling Hot Module Replacement (HMR).
Here are the initial scripts:
"build": "NODE_ENV=production $(npm bin)/webpack --watch",
"dev": "$(npm bin)/nodemon --exec \"$(npm bin)/ts-node\" ./server/server.ts || npm run build",
Below is my ts-loader configuration:
{ test: /\.tsx?$/, loader: 'awesome-typescript-loader' }
And here is my dev-server setup:
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))
}
However, I am encountering an error that states:
[HMR] The following modules couldn't be hot updated: (Full reload needed)
This typically happens when the changed modules and their parents do not support hot reloading. Please refer to http://webpack.github.io/docs/hot-module-replacement-with-webpack.html for more information.