js does not hot update

[xwh-6688]

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

What you are reporting:
When I change a JS file, the browser console prints out where it says updated, and the network also requests the updated bundle, but the page doesn't change. It turns out that the updated bundle is in the head tag, while the bundle generated by the HTML-Webpack-plugin is in the body tag. So the page hasn't been updated. Is there any way to change where the updated bundle is inserted into the DOM

Expected behavior

What you think should happen:
When I change a JS file, the page is updated to the latest

Actual behavior

What actually happens:
When I change a JS file, the page is not up to date

Environment

React Hot Loader version:
"react-hot-loader": "^4.13.0"
"@hot-loader/react-dom": "^17.0.0"
"webpack": "^4.2.0",
"webpack-cli": "^2.0.13"
"webpack-dev-server": "^3.1.1"
"hot-module-replacement": "^3.0.4"

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

1. node -v: 12.10.0
2. npm -v: 6.10.3

Then, specify:

1. Operating system: Windows 7 Flagship 64-bit edition
2. Browser and version: Chrome v86.0.4240.75

Reproducible Demo

Please take the time to create a new project that reproduces the issue.

You can copy your project that experiences the problem and start removing things until you’re left with the minimal reproducible demo. This helps contributors, and you might get to the root of your problem during that process.

Push to GitHub and paste the link here.

webpack.common.js

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
entry: {
main: ['react-hot-loader/patch', './src/index.js']
},
output: {
path: path.resolve(__dirname, '..', './dist'),
filename: '[name]-[chunkhash:8].js'
},
resolve: {
alias: {
config: path.resolve(__dirname, '../config'),
src: path.resolve(__dirname, '..', './src')
}
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, '..', './template/index.html'),
filename: 'index.html'
})
]
};

webpack.dev.js

const { merge } = require('webpack-merge');
const CommonConfig = require('./webpack.common.js');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = merge(CommonConfig, {
mode: 'development',
output: {
...CommonConfig.output,
filename: '[name]-[hash:8].js'
},
resolve: {
...CommonConfig.resolve,
alias: {
...(CommonConfig.resolve.alias || {}),
'react-dom': '@hot-loader/react-dom'
}
},
module: {
rules: [{
test: /.jsx?$/,
use: {
loader: 'babel-loader'
},
}, {
test: /.scss$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "sass-loader"
}]
}]
},
devServer: {
// host: ip,
contentBase: './dist',
port: 8200,
hot: true,
hotOnly: true,
inline: true
},
plugins: [
...CommonConfig.plugins,
new webpack.HotModuleReplacementPlugin(),
new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('development') })
]
});

index.js

import React from 'react';
import ReactDom from 'react-dom';
import App from 'config/app.js';

const render = (Component) => {
ReactDom.render(
,
document.getElementById('app'));
};

render(App);

config/app.js

import { hot } from 'react-hot-loader/root';
import React, { Component } from 'react';
import Counter from 'src/counter/index.js';
import Number from 'src/number/index.js';

class App extends React.Component {
constructor(props) {
super(props);
};

render() {
    return(
        <div className="app">
            <Counter />
            <Number />
        </div>
    );
};

};

const HotApp = hot(App)

babel.config.json
{
"presets": [
[
"@babel/env",
{
"targets": {
"edge": "17",
"firefox": "60",
"chrome": "67",
"safari": "11.1"
}
}
],
[ "@babel/preset-react" ]
],
"plugins": [
"@babel/plugin-proposal-class-properties",
"react-hot-loader/babel"
]
}

[vzaidman]

@1993hxw fix the formatting of the code please

[theKashey]

Sorry @1993hxw, but as loadable-components and React-Hot-Loader maintainer I can confirm that it will not hot update.
And with with Fast Refresh should not update as well - there is no update to the Loadable itself, so the import will be kept.
Loadable has to be rewritten to hooks to handle HMR out of the box.

However, you can try - https://github.com/pmmmwh/react-refresh-webpack-plugin/