I setup HMR in my project and it works fine for most of my application (electron, webpack, react).
Only issue: the module.hot.accept callback is never called, so for hot-replacing my data stores, it does not work. I actually wonder that HMR works for react etc. even though the handler is not called. Any ideas?
When I change a file, the log looks right:
[WDS] App updated. Recompiling...
09:41:43.883 index.js?69b4:3671 [WDS] App updated. Recompiling...
09:41:46.703 index.js?69b4:3671 [WDS] Warnings while compiling.
...
09:41:46.706 index.js?69b4:3671 [WDS] App hot update...
09:41:46.708 index.js?69b4:3671 [HMR] Checking for updates on the server...
09:41:47.095 index.js?69b4:3671 [HMR] Updated modules:
09:41:47.097 index.js?69b4:3671 [HMR] - ./app/stores/UiStore.js
09:41:47.098 index.js?69b4:3671 [HMR] App is up to date.
// main.js:
...
import UiStore from './stores/UiStore'
import App from './App'
if (module.hot) {
// @ts-ignore
module.hot.accept('./stores/UiStore', () => {
console.log('This is never called, why??')
renderApp(App, createStores(getSnapshot(dbStore), getSnapshot(uiStore)))
})
// @ts-ignore
module.hot.accept('./App', () => {
console.log('This is never called, why??')
renderApp(App, dbStore, uiStore)
})
}
// webpack.config.js:
const path = require('path')
const webpack = require('webpack')
/**
* @type webpack.Configuration
*/
const config = {
devtool: 'eval-cheap-source-map',
entry: {
main: [
'@babel/polyfill',
'./app/main.js'
],
worker: [
'@babel/polyfill',
'./app/worker.js'
],
pdfexport: [
'@babel/polyfill',
'./app/pdfExport.js'
]
},
mode: 'development',
output: {
filename: '[name]-bundle.js',
path: path.resolve(__dirname, 'dist'),
publicPath: '/'
},
module: {
rules: [
{
test: /\.node$/,
use: 'node-loader'
},
{
test: /\.js$/,
exclude: /(node_modules|bower_compontents)/,
use: ['babel-loader']
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(js)$/,
include: /node_modules/
}
]
},
plugins: [new webpack.HotModuleReplacementPlugin()],
devServer: {
host: 'localhost',
port: 3000,
historyApiFallback: true,
hot: true
},
target: 'electron-renderer'
}
module.exports = config
// package.json:
"scripts": {
"start-dev": "cross-env NODE_ENV=development webpack-dev-server",
...
"devDependencies": {
"@hot-loader/react-dom": "^17.0.1",
"react-hot-loader": "^4.13.0",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.2",
"webpack-node-externals": "^1.7.2",
