[React 19] HMR Bugs

[ikerya]

1st issue: The error gets shown right before the HMR reloads (not updates) the page after changes are made.

2nd issue: HMR reloads the page instead of updating trivial components (App).

./package.json:

{
  "name": "chat-contests",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "dev": "npx webpack serve",
    "build": "npx webpack"
  },
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "@babel/core": "^7.26.0",
    "@babel/preset-env": "^7.26.0",
    "@babel/preset-react": "^7.26.3",
    "babel-loader": "^9.2.1",
    "css-loader": "^7.1.2",
    "html-webpack-plugin": "^5.6.3",
    "style-loader": "^4.0.0",
    "webpack": "^5.97.1",
    "webpack-cli": "^6.0.1",
    "webpack-dev-server": "^5.2.0"
  },
  "dependencies": {
    "@reduxjs/toolkit": "^2.5.0",
    "axios": "^1.7.9",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-redux": "^9.2.0"
  }
}

./src/index.js:

In the logs there's only the "HOT AVAILABLE" message. For some reason HMR doesn't accept my module.

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

const app = createRoot(
    document.getElementById('app')
);

const render = () => app.render(<App />);

if (module.hot) {
    console.error('HOT AVAILABLE');
    
    module.hot.accept('./App', () => {
        console.error('HOT ACCEPTED');

        const NextApp = require('./App').default;
        
        console.error('HOT APP LOADED');
        
        app.render(<NextApp />);
    });
} else {
    console.error('NOT HOT');

    render();
}

./src/App.js:

import React from 'react';

const App = () => {
    return (
        <div>Hello World!!10!</div>
    );
};

export default App;

./webpack.config.js:

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

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.[contenthash].js',
        clean: true
    },
    devServer: {
        static: {
            directory: './dist',
            publicPath: '/apps/chat-contests/dev'
        },
        port: 1010,
        hot: true,
        allowedHosts: 'all',
        client: {
            webSocketURL: {
                protocol: 'wss',
                port: 443,
                hostname: 'my-hostname.com',
                pathname: '/chat-contests-ws'
            }
        }
    },
    module: {
        rules: [{
            test: /\.jsx?$/,
            exclude: /node_modules/,
            use: 'babel-loader'
        }, {
            test: /\.css$/,
            use: [ 'style-loader', 'css-loader' ]
        }]
    },
    resolve: {
        extensions: [ '.js', '.jsx' ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html'
        })
    ]
};

[ikerya]

If i make the following changes to the code, HMR updates the contents inside App component, but i'm still getting these errors:

./src/index.js:

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

const app = createRoot(
    document.getElementById('app')
);

const render = () => app.render(<App />);

render();

if (module.hot) {
    module.hot.accept();
}

[ikerya]

Any help?