Q: React webpack hotload get stuck on index.html after refreshing webpage Webpack hotload feature gets stuck on index.html after refreshing web page. It stucks and never goes further than index.html file of the project, which is located under /public/index.html. After it get stucks, I'm able to fix it by editing anything in index.html and refresing webpage, or stop/run project again.
create-react-app's own webpack replaced by our own. This is a must to configure a 3rd party library we use.
I tried like 30+ solutions accross the web, mostly stackoverflow but couldn't managed to solve it.
npm run start script used in package.json:
 "start": "webpack serve --mode development --progress",

Here some code snippets from configurations made to enable hotload and solve this problem:
(since webpack file is too large i only copied the relevant parts. I can copy all if it helps.)
webpack.config.js
//...
devServer: {
    historyApiFallback: true,
    hot: true,
    port: 3001,
    open: false
},

plugins: [
    //...
    ...(isProduction ? [] : [new webpack.HotModuleReplacementPlugin()])
]

.babelrc
{
    "presets": [
      [
        "@babel/preset-env",
        {
          "modules": false
        }
      ],
      "@babel/preset-react"
    ],
    "plugins": [

      "@babel/plugin-transform-runtime",
      "react-hot-loader/babel",
      [
        "@babel/plugin-proposal-class-properties",
        {
          "loose": true
        }
      ]
    ]
  }

index.js
// Internet Explorer 11 requires polyfills and partially supported by this project.
// import 'react-app-polyfill/ie11';
// import 'react-app-polyfill/stable';
import React from 'react';
import ReactDOM from 'react-dom';
import 'typeface-muli';
import './i18n';
import './react-chartjs-2-defaults';
import './styles/index.css';
import App from 'app/App';
import { AppContainer } from 'react-hot-loader';
import * as serviceWorker from './serviceWorker';

require('react-hot-loader/patch');

const render = () => {
    ReactDOM.render(
        <AppContainer>
            <App />
        </AppContainer>,
        document.getElementById('root')
    );
};

serviceWorker.unregister();

render();

if (process.env.NODE_ENV === 'development' && module.hot) {
    module.hot.accept('./app/App', render);
}



App.js
import MomentUtils from '@date-io/moment';
import FuseAuthorization from '@fuse/core/FuseAuthorization';
import FuseLayout from '@fuse/core/FuseLayout';
import FuseTheme from '@fuse/core/FuseTheme';
import history from '@history';
import { createGenerateClassName, jssPreset, StylesProvider } from '@material-ui/core/styles';
import { MuiPickersUtilsProvider } from '@material-ui/pickers';
import { create } from 'jss';
import jssExtend from 'jss-plugin-extend';
import rtl from 'jss-rtl';
import React from 'react';
import Provider from 'react-redux/es/components/Provider';
import { Router } from 'react-router-dom';
import { hot } from 'react-hot-loader/root';
import AppContext from './AppContext';
import { Auth } from './auth';
import routes from './fuse-configs/routesConfig';
import store from './store';

const jss = create({
    ...jssPreset(),
    plugins: [...jssPreset().plugins, jssExtend(), rtl()],
    insertionPoint: document.getElementById('jss-insertion-point')
});

const generateClassName = createGenerateClassName();

const App = () => {
    return (
        <AppContext.Provider
            value={{
                routes
            }}
        >
            <StylesProvider jss={jss} generateClassName={generateClassName}>
                <Provider store={store}>
                    <MuiPickersUtilsProvider utils={MomentUtils}>
                        <Auth>
                            <Router history={history}>
                                <FuseAuthorization>
                                    <FuseTheme>
                                        <FuseLayout />
                                    </FuseTheme>
                                </FuseAuthorization>
                            </Router>
                        </Auth>
                    </MuiPickersUtilsProvider>
                </Provider>
            </StylesProvider>
        </AppContext.Provider>
    );
};

export default hot(App);

Any ideas/solutions will be much appreciated.
Thanks.
