Webpack HMR not working

[shubham-jangid]

Despite having all the necessary configurations in my project, I encountered an issue with Hot Module Replacement (HMR) where the entire page would reload upon every change. To investigate the problem, I dived into debugging and discovered that the module object was empty. This observation led me to believe that the empty module object is the root cause of improper HMR functioning. I'm seeking assistance understanding why the module object is empty and exploring potential solutions to resolve this issue.

@TheLarkInn @sokra @alexander-akait @snitin315

Below are the pakage versions that i'm using

 "webpack": "5.75.0",
 "webpack-dev-server": "4.8.1",
 "react": "16.9",
"react-dom": "16.9",

Below is the code :

webpack config:

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const paths = require('../paths');

function getDevEntryPath() {
  return [path.join(paths.appIndexJs)];
}

const DEV_CONFIG = {
  mode: 'development',
  entry: getDevEntryPath(),
  output: {
    filename: 'static/js/[name].js',
    chunkFilename: 'static/js/[name].chunk.js',
    publicPath: '/',
  },
  optimization: {
    minimize: false,
    splitChunks: false,
  },
  plugins: [
    new HtmlWebpackPlugin({
      inject: true,
      template: paths.appHtml,
    }),
    new webpack.HotModuleReplacementPlugin(),
  ],
  devtool: 'eval-source-map',
  performance: {
    hints: false,
  },
};

const webpackBaseCallback = require('./webpack.base.babel');
module.exports = webpackBaseCallback(DEV_CONFIG);

app.js

import React from 'react';
import ReactDOM from 'react-dom';

import Hello from './Hello';

const render = () => {
  ReactDOM.render(<Hello />, document.getElementById('app'));
};

const main = () => {
  console.log(module); // module coming as empty object
  if (module.hot) {
    module.hot.accept(['./Hello'], () => {
      render();
    });
  }
  render();
};

export default main;

hello.js

import React from 'react';

function Hello() {
  return <div>Hello</div>;
}

export default Hello;

[alexander-akait]

Remove new webpack.HotModuleReplacementPlugin(), you don't need it for dev server, it enabled by default, also I strongly reccomend do not write HMR by hands, please use https://github.com/pmmmwh/react-refresh-webpack-plugin

[shubham-jangid]

Alright, I will remove the new webpack.HotModuleReplacementPlugin() as you suggested. However, I don't believe that is the root cause for the empty module object issue.

Though, I appreciate your recommendation of using the react-refresh-webpack-plugin for handling HMR. I will certainly explore that option as it might provide a more robust and efficient solution.

In the meantime, I would greatly appreciate any further insights or suggestions regarding the empty module object issue. It would be extremely helpful in resolving this matter.

Thank you for your assistance

[alexander-akait]

Because there is no module in ESM (webpack still works but only for hot methods, and so module will be empty), I recommend to use import.meta.webpackHot (it is the same with the same API, just under import.meta)

[nyngwang]

Did you solve the problem? I'm familiar with the mentioned plugin and I can help if the problem continues. At first glance, you should not write HMR for React yourself if you're not an expert in both React and webpack. It is far more complex than you expect.