Why is module.hot.accept handler not called?

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:
...
   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",

Source: Ask Javascript Questions

LEAVE A COMMENT