fix webpack react-router

media_commons_booking_app/package.json

@@ -14,9 +14,9 @@
     "open": "clasp open --addon",
     "setup:https": "mkdirp certs && mkcert -key-file ./certs/key.pem -cert-file ./certs/cert.pem localhost 127.0.0.1",
     "build:local": "cross-env NODE_ENV=development CALENDAR_ENV=development webpack",
-    "build:dev": "cross-env NODE_ENV=production CALENDAR_ENV=development webpack",
-    "build:staging": "cross-env NODE_ENV=production CALENDAR_ENV=development webpack",
-    "build": "cross-env NODE_ENV=production CALENDAR_ENV=production webpack",
+    "build:dev": "cross-env NODE_ENV=production CALENDAR_ENV=development webpack --mode=production",
+    "build:staging": "cross-env NODE_ENV=production CALENDAR_ENV=development webpack --mode=production",
+    "build": "cross-env NODE_ENV=production CALENDAR_ENV=production webpack --mode=production",
     "deploy:local": "rimraf dist && npm run build:local && npx clasp push",
     "deploy:dev": "rimraf dist && npm run build:dev && npx clasp push",
     "deploy:staging": "rimraf dist && npm run build:staging && npx clasp push",
@@ -53,6 +53,7 @@
     "react-bootstrap": "^2.4.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.45.2",
+    "react-router": "^6.22.3",
     "react-router-dom": "^6.22.3",
     "react-transition-group": "^4.4.2",
     "tailwind-datepicker-react": "^1.4.2",

media_commons_booking_app/src/client/index.js

@@ -1,18 +1,18 @@
-import { RouterProvider, createHashRouter } from 'react-router-dom';
+import { RouterProvider, createMemoryRouter } from 'react-router-dom';
 
 import AdminPage from './routes/admin/adminPage';
 import BookingForm from './routes/booking/BookingForm';
 import ErrorPage from './errorPage';
 import LandingPage from './routes/booking/formPages/LandingPage';
 import PAPage from './routes/pa/PAPage';
 import React from 'react';
-import ReactDOM from 'react-dom';
 import Root from './routes/root';
 import SelectRoomPage from './routes/booking/formPages/SelectRoomPage';
 import UserRolePage from './routes/booking/formPages/UserRolePage';
 import UserSectionPage from './routes/booking/formPages/UserSectionPage';
+import { createRoot } from 'react-dom/client';
 
-const router = createHashRouter([
+const router = createMemoryRouter([
   {
     path: '/',
     element: <Root />,
@@ -52,9 +52,10 @@ const router = createHashRouter([
   },
 ]);
 
-ReactDOM.render(
+const container = document.getElementById('index');
+const root = createRoot(container);
+root.render(
   <React.StrictMode>
     <RouterProvider router={router} />
-  </React.StrictMode>,
-  document.getElementById('index')
+  </React.StrictMode>
 );

media_commons_booking_app/webpack.config.js

@@ -188,6 +188,13 @@ const DynamicCdnWebpackPluginConfig = {
     if (!isProd && packageName === 'react') {
       return null;
     }
+    if (
+      packageName === 'react-router-dom' ||
+      packageName === 'react-router' ||
+      packageName === '@remix-run/router'
+    ) {
+      return null;
+    }
 
     // define custom CDN configuration for new packages
     // "name" should match the package being imported
@@ -267,7 +274,7 @@ const clientConfigs = clientEntrypoints.map((clientEntrypoint) => {
       }),
       new HtmlWebpackPlugin({
         template: clientEntrypoint.template,
-        filename: `${clientEntrypoint.filename}.html`,
+        filename: `${clientEntrypoint.filename}${isProd ? '' : '-impl'}.html`,
         inlineSource: '^/.*(js|css)$', // embed all js and css inline, exclude packages from dynamic cdn insertion
         scriptLoading: 'blocking',
         inject: 'body',