chore: Upgrade to webpack 5, fix conflicting issues with react-router under docusaurus with yarn workspaces

extensions/default/package.json

@@ -35,7 +35,9 @@
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-i18next": "^10.11.0",
-    "webpack": "^4.0.0",
+    "react-router": "next",
+    "react-router-dom": "next",
+    "webpack": "^5.43.0",
     "webpack-merge": "^5.7.3"
   },
   "dependencies": {

extensions/default/src/ViewerLayout/index.jsx

@@ -12,7 +12,7 @@ import {
 
 import i18n from '@ohif/i18n';
 import { hotkeys } from '@ohif/core';
-
+import { useNavigate } from 'react-router-dom';
 
 const { availableLanguages, defaultLanguage, currentLanguage } = i18n;
 
@@ -91,6 +91,11 @@ function ViewerLayout({
   ViewportGridComp,
 }) {
   const [appConfig] = useAppConfig();
+  const navigate = useNavigate();
+
+  const onClickReturnButton = () => {
+    navigate('/')
+  };
 
   const { t } = useTranslation();
   const { show, hide } = useModal();
@@ -176,7 +181,7 @@ function ViewerLayout({
 
   return (
     <div>
-      <Header menuOptions={menuOptions} WhiteLabeling={appConfig.whiteLabeling} >
+      <Header menuOptions={menuOptions} onClickReturnButton={onClickReturnButton} WhiteLabeling={appConfig.whiteLabeling} >
         <ErrorBoundary context="Primary Toolbar">
           <div className="relative flex justify-center">
             <Toolbar servicesManager={servicesManager} />