diff --git a/package-lock.json b/package-lock.json
index b1287eb657..1cd9698d16 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -46287,7 +46287,7 @@
         "megalodon": "^3.6.1",
         "mock-require": "^3.0.3",
         "react-beautiful-dnd-test-utils": "^4.1.0",
-        "react-hot-loader": "^4.12",
+        "react-hot-loader": "^4.13.1",
         "redux-mock-store": "^1.5.4",
         "sass": "^1.69.5",
         "sass-loader": "^10.4.1",
diff --git a/packages/app/app/App.js b/packages/app/app/App.js
index dffde58eb7..9dab9c9d5a 100644
--- a/packages/app/app/App.js
+++ b/packages/app/app/App.js
@@ -47,6 +47,7 @@ import NavButtons from './components/NavButtons';
 import WindowControls from './components/WindowControls';
 import SidebarMenuContainer from './containers/SidebarMenuContainer';
 import { CommandPaletteContainer } from './containers/CommandPaletteContainer';
+import { hot } from 'react-hot-loader';
 
 @withTranslation('app')
 class App extends React.PureComponent {
@@ -202,5 +203,5 @@ export default withRouter(
   connect(
     mapStateToProps,
     mapDispatchToProps
-  )(App)
+  )(hot(module)(App))
 );
diff --git a/packages/app/app/index.js b/packages/app/app/index.js
index 65ff990c2b..3e6f011054 100644
--- a/packages/app/app/index.js
+++ b/packages/app/app/index.js
@@ -3,11 +3,11 @@ import 'regenerator-runtime';
 import 'semantic-ui-css/semantic.min.css';
 import 'font-awesome/css/font-awesome.css';
 
+import 'react-hot-loader/root';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { MemoryRouter } from 'react-router-dom';
 import { Provider } from 'react-redux';
-import { AppContainer, setConfig } from 'react-hot-loader';
 import { I18nextProvider } from 'react-i18next';
 import { remote } from 'electron';
 import { getOption, setOption } from '@nuclear/core';
@@ -16,10 +16,6 @@ import i18n, { setupI18n } from '@nuclear/i18n';
 import App from './App';
 import configureStore from './store/configureStore';
 
-setConfig({
-  showReactDomPatchNotification: false
-});
-
 const store = configureStore();
 window.store = store; // put store in global scope for plugins
 
@@ -36,23 +32,15 @@ const render = async Component => {
   });
 
   ReactDOM.render(
-    <AppContainer>
-      <I18nextProvider i18n={i18n}>
-        <Provider store={store}>
-          <MemoryRouter>
-            <Component />
-          </MemoryRouter>
-        </Provider>
-      </I18nextProvider>
-    </AppContainer>,
+    <I18nextProvider i18n={i18n}>
+      <Provider store={store}>
+        <MemoryRouter>
+          <Component />
+        </MemoryRouter>
+      </Provider>
+    </I18nextProvider>,
     document.getElementById('react-root')
   );
 };
 
 render(App);
-
-if (module.hot) {
-  module.hot.accept(() => {
-    render(App);
-  });
-}
diff --git a/packages/app/package.json b/packages/app/package.json
index 7a5aa20f5b..2aa6840734 100644
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -115,7 +115,7 @@
     "megalodon": "^3.6.1",
     "mock-require": "^3.0.3",
     "react-beautiful-dnd-test-utils": "^4.1.0",
-    "react-hot-loader": "^4.12",
+    "react-hot-loader": "^4.13.1",
     "redux-mock-store": "^1.5.4",
     "sass": "^1.69.5",
     "sass-loader": "^10.4.1",
diff --git a/packages/app/webpack.config.ts b/packages/app/webpack.config.ts
index 49eec2ce18..3ecdd29fde 100644
--- a/packages/app/webpack.config.ts
+++ b/packages/app/webpack.config.ts
@@ -39,8 +39,8 @@ module.exports = (env) => {
     ? path.resolve(APP_DIR, 'index.js')
     : [
       'react-hot-loader/patch',
-      'webpack-dev-server/client?http://localhost:8080',
-      'webpack/hot/only-dev-server',
+      'webpack/hot/dev-server.js',
+      'webpack-dev-server/client/index.js?hot=true&live-reload=true',
       path.resolve(APP_DIR, 'index.js')
     ];
   const output: webpack.Configuration['output'] = {
@@ -118,8 +118,12 @@ module.exports = (env) => {
       )
     ),
     new webpack.ContextReplacementPlugin(
-      /\/(ytpl|ytsr|youtube-ext|bandcamp-scraper)\//,
+      /\/(ytpl|ytsr|youtube-ext|bandcamp-scraper|http-cookie-agent|deasync)\//,
       false
+    ),
+    new webpack.ContextReplacementPlugin(
+      /deasync/,
+      path.resolve(__dirname, 'node_modules', 'deasync', 'index.js')
     )
   ];
 
@@ -237,6 +241,7 @@ module.exports = (env) => {
   };
 
   if (IS_DEV) {
+    config.plugins?.push(new webpack.HotModuleReplacementPlugin());
     config.devServer = {
       hot: true,
       static: {