add react-router-dom cdn webpack

ITPNYU · Mar 26, 2024 · 9959343 · 9959343
1 parent 0ce00f0
commit 9959343
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 7 deletions.
diff --git a/media_commons_booking_app/package-lock.json b/media_commons_booking_app/package-lock.json
diff --git a/media_commons_booking_app/package.json b/media_commons_booking_app/package.json
@@ -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",

diff --git a/media_commons_booking_app/src/client/index.html b/media_commons_booking_app/src/client/index.html
@@ -14,6 +14,18 @@
       crossorigin="anonymous"
     />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.8.1/datepicker.min.js"></script>
+    <!-- <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/react-router-dom/6.22.3/react-router-dom.production.min.js"
+      integrity="sha512-eFKluaAyNJr8h7VL24su8w9qVFlNeLEI6nroW/ltJoh79cMIqXbHbJ+rKRZxalcTWiUPecOnSDnjVKsyAOA0xQ=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    ></script>
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/react-router/6.22.3/react-router.production.min.js"
+      integrity="sha512-8GcWjbp4e2GeKa8Fz1Z3mqWvkiVrk6waiVdBG96PsOg30I9rjaOWDgD58A5umDn8KNs0OAxAYliKtX/r1mSy/A=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    ></script> -->
   </head>
   <body>
     <section id="index">

diff --git a/media_commons_booking_app/src/client/index.js b/media_commons_booking_app/src/client/index.js
@@ -1,18 +1,22 @@
-import { RouterProvider, createHashRouter } from 'react-router-dom';
+'use client';
+
+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';
+
+console.log('TEST IN INDEX.JS');
 
-const router = createHashRouter([
+const router = createMemoryRouter([
   {
     path: '/',
     element: <Root />,
@@ -52,9 +56,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>
 );
diff --git a/media_commons_booking_app/webpack.config.js b/media_commons_booking_app/webpack.config.js
@@ -246,6 +246,20 @@ const DynamicCdnWebpackPluginConfig = {
           version: packageVersion,
           url: `https://unpkg.com/@types/react@${packageVersion}/index.d.ts`,
         };
+      case 'react-router-dom':
+        return {
+          name: packageName,
+          var: 'ReactRouterDOM',
+          version: packageVersion,
+          url: `https://cdnjs.cloudflare.com/ajax/libs/react-router-dom/${packageVersion}/react-router-dom.production.min.js`,
+        };
+      case 'react-router':
+        return {
+          name: packageName,
+          var: 'ReactRouter',
+          version: packageVersion,
+          url: `https://cdnjs.cloudflare.com/ajax/libs/react-router/${packageVersion}/react-router.production.min.js`,
+        };
       // return defaults/null depending if Dynamic CDN plugin finds package
       default:
         return moduleDetails;
@@ -267,7 +281,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',