Ignored an update to unaccepted module - Webpack 4

Author: caleniucCreated Jul 5, 2019Updated Nov 24, 2021

If you are reporting a bug or having an issue setting up React Hot Loader, please fill in below. For feature requests, feel free to remove this template entirely.

Description

Upgraded Webpack from V2 and react-transform-hmr to Webpack V4 with react-hot-loader, but I'm getting:

Ignored an update to unaccepted module [HMR] The following modules couldn't be hot updated: (Full reload needed)

Expected behavior

I'm expecting that JS files do hot reload and not require a full reload. Maybe this is an issue with my configuration, but I've tried everything so far and can't find an actual answer. Hot reload works on SCSS files, but not on JS files.

Actual behavior

Ignored an update to unaccepted module [HMR] The following modules couldn't be hot updated: (Full reload needed)

Environment

React Hot Loader version: 4.12.0

Run these commands in the project folder and fill in their results:

  1. node -v: v8.10.0
  2. npm -v: v5.6.0

Then, specify:

  1. Operating system: Windows 10
  2. Browser and version: Chrome 75.0.3770.100

webpack.config.js

Entry:

webpackConfig.entry = {
  app: __DEV__ ?
    ['react-hot-loader/patch', APP_ENTRY_PATH, `webpack-hot-middleware/client?path=${config.compiler.publicPath}__webpack_hmr`] :
    [APP_ENTRY_PATH],
};

JS files loader:

webpackConfig.module.rules = [{
  test: /\.(js|jsx)$/,
  exclude: [/(node_modules)/, /lib/],
  use: [{
    loader: 'babel-loader',
    options: {
      cacheDirectory: true,
    }
  }]
}];

.babelrc

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "ie": "11"
        }
      }
    ],
    "@babel/preset-react",
    "@babel/preset-flow"
  ],
  "plugins": [
    "react-hot-loader/babel",
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
    [
      "@babel/plugin-proposal-class-properties",
      {
        "loose": true
      }
    ],
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-transform-runtime",
    [
      "@babel/plugin-proposal-object-rest-spread",
      {
        "useBuiltIns": true
      }
    ]
  ],
  "env": {
    "test": {
      "presets": [
        [
          "@babel/preset-env",
          {
            "targets": {
              "node": "current"
            }
          }
        ],
        "@babel/preset-react",
        "@babel/preset-flow"
      ],
      "plugins": [
        "@babel/plugin-transform-modules-commonjs",
        "transform-amd-to-commonjs",
        [
          "@babel/plugin-proposal-class-properties",
          {
            "loose": true
          }
        ],
        "dynamic-import-node"
      ]
    },
    "production": {
      "plugins": [
        "transform-react-remove-prop-types",
        "transform-react-constant-elements"
      ]
    }
  }
}

Root component exported

export default hot(Root);

Source: gaearon/react-hot-loader