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

platform/core/src/services/UserAuthenticationService/UserAuthenticationService.js

@@ -16,8 +16,8 @@ const serviceImplementation = {
   _getState: () => console.warn('getState() NOT IMPLEMENTED'),
   _setUser: () => console.warn('_setUser() NOT IMPLEMENTED'),
   _getUser: () => console.warn('_setUser() NOT IMPLEMENTED'),
-  _getAuthorizationHeader: () =>
-    console.warn('_getAuthorizationHeader() NOT IMPLEMENTED'),
+  _getAuthorizationHeader: () => {}, // TODO: have enabled/disabled state?
+  //console.warn('_getAuthorizationHeader() NOT IMPLEMENTED'),
   _handleUnauthenticated: () =>
     console.warn('_handleUnauthenticated() NOT IMPLEMENTED'),
   _reset: () => console.warn('reset() NOT IMPLEMENTED'),

platform/docs/package.json

@@ -2,6 +2,16 @@
   "name": "ohif-docs",
   "version": "0.0.0",
   "private": true,
+  "workspaces": {
+    "nohoist": [
+      "@docusaurus/core/**",
+      "@docusaurus/core",
+      "@docusaurus/preset-classic",
+      "@docusaurus/preset-classic/**",
+      "**/react-router-dom",
+      "**/react-router"
+    ]
+  },
   "scripts": {
     "docusaurus": "docusaurus",
     "start": "docusaurus start --port 8001",
@@ -30,8 +40,8 @@
     "url-loader": "^4.1.1"
   },
   "peerDependencies": {
-    "react": "^16.11.0",
-    "react-dom": "^16.11.0"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   },
   "browserslist": {
     "production": [

platform/i18n/package.json

@@ -31,8 +31,8 @@
   "peerDependencies": {
     "i18next": "^17.0.3",
     "i18next-browser-languagedetector": "^3.0.1",
-    "react": "^16.11.0",
-    "react-dom": "^16.11.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-i18next": "^10.11.0"
   },
   "dependencies": {
@@ -44,8 +44,8 @@
   "devDependencies": {
     "i18next": "^17.0.3",
     "i18next-browser-languagedetector": "^3.0.1",
-    "react": "^16.11.0",
-    "react-dom": "^16.11.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-i18next": "^10.11.0",
     "webpack-merge": "^5.7.3"
   }

platform/ui/package.json

@@ -32,11 +32,11 @@
     "classnames": "2.2.6",
     "lodash.debounce": "4.0.8",
     "moment": "2.24.0",
-    "react": "16.11.0",
+    "react": "17.0.2",
     "react-dates": "^21.8.0",
-    "react-dnd": "10.0.2",
-    "react-dnd-html5-backend": "10.0.2",
-    "react-dom": "16.11.0",
+    "react-dnd": "14.0.2",
+    "react-dnd-html5-backend": "14.0.0",
+    "react-dom": "17.0.2",
     "react-draggable": "4.4.3",
     "react-error-boundary": "^3.1.3",
     "react-modal": "3.11.2",

platform/ui/src/components/Header/Header.jsx

@@ -2,19 +2,16 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import classNames from 'classnames';
-// TODO: This may fail if package is split from PWA build
-import { useNavigate } from 'react-router-dom';
 import { NavBar, Svg, Icon, IconButton, Dropdown } from '@ohif/ui';
 
-function Header({ children, menuOptions, isReturnEnabled, isSticky, WhiteLabeling }) {
+function Header({ children, menuOptions, isReturnEnabled, onClickReturnButton, isSticky, WhiteLabeling }) {
   const { t } = useTranslation('Header');
-  const navigate = useNavigate();
 
   // TODO: this should be passed in as a prop instead and the react-router-dom
   // dependency should be dropped
-  const onReturnHandler = () => {
-    if (isReturnEnabled) {
-      navigate('/');
+  const onClickReturn = () => {
+    if (isReturnEnabled && onClickReturnButton) {
+      onClickReturnButton()
     }
   };
 
@@ -30,7 +27,7 @@ function Header({ children, menuOptions, isReturnEnabled, isSticky, WhiteLabelin
               // Either injected service? Or context (like react router's `useLocation`?) */}
           <div
             className={classNames("inline-flex items-center mr-3", isReturnEnabled && 'cursor-pointer')}
-            onClick={onReturnHandler}
+            onClick={onClickReturn}
           >
             {isReturnEnabled && <Icon name="chevron-left" className="w-8 text-primary-active" />}
             <div className="ml-4">{WhiteLabeling ? CustomLogo(React) : <Svg name="logo-ohif" />}</div>
@@ -78,6 +75,7 @@ Header.propTypes = {
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   isReturnEnabled: PropTypes.bool,
   isSticky: PropTypes.bool,
+  onClickReturnButton: PropTypes.func,
   WhiteLabeling: PropTypes.element,
 };
 

platform/ui/src/components/Thumbnail/Thumbnail.jsx

@@ -24,6 +24,7 @@ const Thumbnail = ({
   // this will still allow for "drag", even if there is no drop target for the
   // specified item.
   const [collectedProps, drag, dragPreview] = useDrag({
+    type: "displayset",
     item: { ...dragData },
     canDrag: function(monitor) {
       return Object.keys(dragData).length !== 0;

platform/ui/src/components/ThumbnailNoImage/ThumbnailNoImage.jsx

@@ -18,6 +18,7 @@ const ThumbnailNoImage = ({
   isActive,
 }) => {
   const [collectedProps, drag, dragPreview] = useDrag({
+    type: "displayset",
     item: { ...dragData },
     canDrag: function(monitor) {
       return Object.keys(dragData).length !== 0;

platform/ui/src/contextProviders/DragAndDropProvider.jsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { DndProvider } from 'react-dnd';
-import HTML5Backend from 'react-dnd-html5-backend';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+
 // import TouchBackend from 'react-dnd-touch-backend';
 
 // TODO: this is false when it should not be :thinking:

platform/viewer/.webpack/webpack.pwa.js

@@ -27,6 +27,8 @@ const PROXY_DOMAIN = process.env.PROXY_DOMAIN;
 const ENTRY_TARGET = process.env.ENTRY_TARGET || `${SRC_DIR}/index.js`;
 const Dotenv = require('dotenv-webpack');
 
+console.warn(path.resolve(__dirname, '../node_modules'));
+
 module.exports = (env, argv) => {
   const baseConfig = webpackBase(env, argv, { SRC_DIR, DIST_DIR });
   const isProdBuild = process.env.NODE_ENV === 'production';
@@ -44,6 +46,15 @@ module.exports = (env, argv) => {
     module: {
       rules: [...extractStyleChunksRule(isProdBuild)],
     },
+    resolve: {
+      modules: [
+        // Modules specific to this package
+        path.resolve(__dirname, '../node_modules'),
+        // Hoisted Yarn Workspace Modules
+        path.resolve(__dirname, '../../../node_modules'),
+        SRC_DIR,
+      ],
+    },
     plugins: [
       new Dotenv(),
       // Uncomment to generate bundle analyzer
@@ -51,27 +62,31 @@ module.exports = (env, argv) => {
       // Clean output.path
       new CleanWebpackPlugin(),
       // Copy "Public" Folder to Dist
-      new CopyWebpackPlugin([
-        {
-          from: PUBLIC_DIR,
-          to: DIST_DIR,
-          toType: 'dir',
-          // Ignore our HtmlWebpackPlugin template file
-          // Ignore our configuration files
-          ignore: ['config/*', 'html-templates/*', '.DS_Store'],
-        },
-        // Short term solution to make sure GCloud config is available in output
-        // for our docker implementation
-        {
-          from: `${PUBLIC_DIR}/config/google.js`,
-          to: `${DIST_DIR}/google.js`,
-        },
-        // Copy over and rename our target app config file
-        {
-          from: `${PUBLIC_DIR}/${APP_CONFIG}`,
-          to: `${DIST_DIR}/app-config.js`,
-        },
-      ]),
+      new CopyWebpackPlugin({
+        patterns: [
+          {
+            from: PUBLIC_DIR,
+            to: DIST_DIR,
+            toType: 'dir',
+            globOptions: {
+              // Ignore our HtmlWebpackPlugin template file
+              // Ignore our configuration files
+              ignore: ['config/*', 'html-templates/*', '.DS_Store'],
+            },
+          },
+          // Short term solution to make sure GCloud config is available in output
+          // for our docker implementation
+          {
+            from: `${PUBLIC_DIR}/config/google.js`,
+            to: `${DIST_DIR}/google.js`,
+          },
+          // Copy over and rename our target app config file
+          {
+            from: `${PUBLIC_DIR}/${APP_CONFIG}`,
+            to: `${DIST_DIR}/app-config.js`,
+          },
+        ],
+      }),
       // https://github.com/faceyspacey/extract-css-chunks-webpack-plugin#webpack-4-standalone-installation
       new ExtractCssChunksPlugin({
         filename: isProdBuild ? '[name].[hash].css' : '[name].css',

platform/viewer/package.json

@@ -20,13 +20,12 @@
     "build:viewer": "cross-env NODE_ENV=production node --max_old_space_size=4096 ./../../node_modules/webpack/bin/webpack.js --config .webpack/webpack.pwa.js --progress",
     "build:viewer:ci": "cross-env NODE_ENV=production PUBLIC_URL=/ APP_CONFIG=config/netlify.js QUICK_BUILD=true node --max_old_space_size=4096 ./../../node_modules/webpack/bin/webpack.js --config .webpack/webpack.pwa.js",
     "build:viewer:demo": "cross-env NODE_ENV=production APP_CONFIG=config/demo.js HTML_TEMPLATE=rollbar.html QUICK_BUILD=true node --max_old_space_size=4096 ./../../node_modules/webpack/bin/webpack.js --progress --config .webpack/webpack.pwa.js",
-    "dev": "cross-env NODE_ENV=development webpack-dev-server --config .webpack/webpack.pwa.js --watch",
-    "dev:orthanc": "cross-env NODE_ENV=development PROXY_TARGET=/dicom-web PROXY_DOMAIN=http://localhost:8042 APP_CONFIG=config/docker_nginx-orthanc.js webpack-dev-server --config .webpack/webpack.pwa.js --watch",
+    "dev": "cross-env NODE_ENV=development webpack serve --config .webpack/webpack.pwa.js",
+    "dev:orthanc": "cross-env NODE_ENV=development PROXY_TARGET=/dicom-web PROXY_DOMAIN=http://localhost:8042 APP_CONFIG=config/docker_nginx-orthanc.js webpack serve --config .webpack/webpack.pwa.js",
     "dev:viewer": "yarn run dev",
     "start": "yarn run dev",
     "test:e2e": "cypress open",
     "test:e2e:ci": "percy exec -- cypress run --config video=false --record --browser chrome --spec 'cypress/integration/visual-regression/**/*'",
-    "test:e2e:script-tag": "cypress run --config video=false --browser chrome --spec 'cypress/integration/common/**/*,cypress/integration/script-tag/**/*'",
     "test:e2e:local": "cypress run --config video=false --browser chrome --spec 'cypress/integration/common/**/*,cypress/integration/pwa/**/*'",
     "test:e2e:dist": "start-server-and-test test:e2e:serve http://localhost:3000 test:e2e:ci",
     "test:e2e:serve": "serve -n -l 3000 -s dist",
@@ -40,9 +39,8 @@
   ],
   "peerDependencies": {
     "cornerstone-core": "^2.3.0",
-    "react": "^16.11.0",
-    "react-dom": "^16.11.0",
-    "webpack": "^4.0.0"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   },
   "dependencies": {
     "@babel/runtime": "7.7.6",
@@ -77,13 +75,15 @@
     "react-router-dom": "next"
   },
   "devDependencies": {
+    "webpack": "^5.43.0",
+    "webpack-cli": "^4.7.2",
     "@percy/cypress": "^2.3.0",
-    "cypress-file-upload": "^3.5.3",
     "cypress": "^6.4.0",
+    "cypress-file-upload": "^3.5.3",
     "identity-obj-proxy": "3.0.x",
     "lodash": "4.17.15",
     "terser-webpack-plugin": "^5.1.1",
-    "webpack-bundle-analyzer": "^3.6.0",
+    "webpack-bundle-analyzer": "^4.4.2",
     "webpack-merge": "^5.7.3"
   }
 }

platform/viewer/src/history.js

@@ -1,6 +0,0 @@
-// TODO: replace with HistoryRouter https://github.com/ReactTraining/react-router/pull/7586
-import { createBrowserHistory, createHashHistory } from 'history';
-const useHashRouting = JSON.parse(process.env.USE_HASH_ROUTER);
-const router = useHashRouting ? createHashHistory() : createBrowserHistory();
-
-export default router;