Upgrade React Router

packages/build/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@labkey/build",
-  "version": "6.16.1",
+  "version": "7.0.0-fb-upgrade-hot-loader.3",
   "description": "LabKey client-side build assets",
   "files": [
     "webpack/"
@@ -18,6 +18,7 @@
     "@babel/preset-env": "~7.22.20",
     "@babel/preset-react": "~7.22.15",
     "@babel/preset-typescript": "~7.22.15",
+    "@pmmmwh/react-refresh-webpack-plugin": "~0.5.11",
     "ajv": "~8.12.0",
     "babel-loader": "~9.1.3",
     "bootstrap-sass": "~3.4.3",
@@ -28,7 +29,7 @@
     "fork-ts-checker-webpack-plugin": "~8.0.0",
     "html-webpack-plugin": "~5.5.3",
     "mini-css-extract-plugin": "~2.7.6",
-    "react-hot-loader": "~4.13.1",
+    "react-refresh": "~0.14.0",
     "resolve-url-loader": "~5.0.0",
     "rimraf": "~5.0.1",
     "sass": "~1.67.0",

packages/build/webpack/constants.js

@@ -136,7 +136,7 @@ const BABEL_DEV_CONFIG = {
     ...BABEL_CONFIG,
     options: {
         ...BABEL_CONFIG.options,
-        plugins: ['react-hot-loader/babel'].concat(BABEL_PLUGINS),
+        plugins: [require.resolve('react-refresh/babel')].concat(BABEL_PLUGINS),
     }
 };
 

packages/build/webpack/package.config.js

@@ -92,6 +92,7 @@ module.exports = {
         '@labkey/premium/storage',
         '@labkey/premium/search',
         '@remirror/pm',
+        '@remix-run/router',
         '@testing-library/jest-dom',
         '@testing-library/react',
         '@testing-library/user-event',
@@ -115,6 +116,7 @@ module.exports = {
         'lodash',
         'moment',
         'moment-timezone',
+        'normalizr',
         'numeral',
         'prosemirror',
         'react',
@@ -127,6 +129,7 @@ module.exports = {
         'react-dom/test-utils',
         'react-redux',
         'react-router',
+        'react-router-dom',
         'react-select',
         'react-select/async',
         'react-select/async-creatable',

packages/build/webpack/watch.config.js

@@ -4,6 +4,7 @@
  * Licensed under the Apache License, Version 2.0: http://www.apache.org/licenses/LICENSE-2.0
  */
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 const constants = require('./constants');
 const path = require('path');
 // relative to the <lk_module>/node_modules/@labkey/build/webpack dir
@@ -15,7 +16,7 @@ const devServer = {
     },
     host: 'localhost',
     port: constants.watchPort,
-    hot: 'only',
+    hot: true,
     headers: {
         "Access-Control-Allow-Origin": "*",
         "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
@@ -37,7 +38,6 @@ for (let i = 0; i < entryPoints.apps.length; i++) {
     const entryPoint = entryPoints.apps[i];
 
     entries[entryPoint.name] = [
-        'react-hot-loader/patch',
         entryPoint.path + '/dev.tsx'
     ];
 }
@@ -57,6 +57,7 @@ module.exports = {
             ...constants.aliases.LABKEY_PACKAGES_DEV,
             // This assures there is only one copy of react used while doing start-link
             react: path.resolve('./node_modules/react'),
+            'react-router-dom': path.resolve('./node_modules/react-router-dom'),
         },
         extensions: constants.extensions.TYPESCRIPT.concat('.scss')
     },
@@ -68,6 +69,7 @@ module.exports = {
         emitOnErrors: false,
     },
     plugins: [
+        new ReactRefreshWebpackPlugin(),
         // This Plugin type checks our TS code, @babel/preset-typescript does not type check, it only transforms
         new ForkTsCheckerWebpackPlugin(constants.TS_CHECKER_DEV_CONFIG)
     ],

packages/components/__mocks__/react-router-dom.ts

@@ -0,0 +1,32 @@
+const rrd = jest.createMockFromModule('react-router-dom') as any;
+export default rrd;
+
+export const Link = rrd.Link;
+export const unstable_usePrompt = () => {};
+
+let navigate = jest.fn();
+
+export const __setNavigate = (mockNavigate): void => {
+    navigate = mockNavigate;
+};
+export const useNavigate = () => navigate;
+
+// Yes, this doesn't properly match the Location type, however we don't use anything but pathname at the moment
+let location_ = { pathname: '' } as Location;
+
+export const __setLocation = (mockLocation: Location): void => {
+    location_ = mockLocation;
+};
+export const useLocation = () => location_;
+
+let searchParams = new URLSearchParams();
+let setSearchParams = jest.fn();
+export const __setSearchParams = (mockSearchParams: URLSearchParams) => searchParams = mockSearchParams;
+export const __setSetSearchParams = (mockSetSearchParams) => setSearchParams = mockSetSearchParams;
+export const useSearchParams = () => {
+    return [searchParams, setSearchParams];
+};
+
+let params = {};
+export const __setParams = (mockParams: Record<string, string>) => params = mockParams;
+export const useParams = () => params;