Ignored an update to unaccepted module - No automatic page reloading with recent versions of webpack and react packages

[samhuk]

• Operating System: Windows 10 + MacOS
• Node Version: 15.8.0
• NPM Version: 7.5.3
• webpack Version: 5.24.2
• webpack-hot-middleware Version: 2.25.0
• webpack-dev-middleware Version: 4.1.0
• react Version: 17.0.1
• ts-loader Version: 8.0.17

All of these are the latest version as of writing (already tried to see if updating everything solved it).

Expected Behavior

No console warn, page automatically reloads upon code change

Actual Behavior

Console warn and page doesn't automatically reloads upon code change

Code

Basic react front-end app with typescript, using ts-loader for webpack. For example, here's a file i'm doing a code change to:

import React from 'react'

export const Header = ({ title }: any) => (
  <div className="header">{title}</div>
)

export default Header

Got my dev webpack config (this is a dev layer on-top of a base, but this contains all the relevant dev-related config like dev middleware stuff):

export const config: webpack.Configuration = webpackMerge(base, {
  mode: 'development',
  devtool: 'inline-source-map',
  entry: [
    'webpack-hot-middleware/client?reload=true&overlay=true',
  ],
  plugins: [
    new webpack.EnvironmentPlugin({ NODE_ENV: 'development' }),
    new webpack.HotModuleReplacementPlugin(),
  ],
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        options: { configFile: TS_LOADER_TS_CONFIG_FILE_PATH },
        loader: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
})

Got my expressjs server using dev and hot middlewares:

app
  // -- Webpack dev and hot middleware to enable webpack to serve client files with hot reloading
  .use(webpackDevMiddleware(webpackCompiler))
  .use(webpackHotMiddleware(webpackCompiler))

How Do We Reproduce?

• Clone repo: https://github.com/samhuk/trew-component-starter
• Make sure python is installed and available on PATH (for node-sass)
• npm install
• npm start
• Navigate to http://localhost:4001, open console
• Make a change to any of the react files (i.e. header/index.tsx)
• Observe browser console console warns from webpack-dev-middleware

Notes

This was working as-is in previous versions of the packages (webpack and react), so I think that something changed that has made them incompatible for hot-reloading (or at least auto refreshing the page). I've checked and checked again the webpack docs and v5 upgrade notes and there doesn't seem to be pretty much anything about what this error means, other than this obscure and uninformative API reference of the function where the error is coming from: https://webpack.js.org/api/hot-module-replacement/#apply

I've asked the question on https://gitter.im/webpack/webpack#, but that seems to have suffered an all-Q-no-A death.

[glenjamin]

thanks for the detailed report, I think this is the same as #390 and #391

[samhuk]

Ah, definitely a dupe. At least i'm glad it's not something i've done 😂 thanks!

[glenjamin]

Closing in favour of #390