React webpack hotload get stuck on index.html after refreshing webpage - reactjs

Question

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.