Updated package.json to eliminate all of the deprecated libraries

Updated react-router-dom from v5 to v6 using the compatibility layer <CompatRouter> to eliminate the deprecated package `[email protected]` that was being included in V5. Fully updating all the <Route> commands is a bigger task, that I'll start on. Then <CompatRouter> can be removed. Did not test the upgrade to the latest version of puppeteer or mocha
SailingSteve · Jan 5, 2024 · 7fb4e01 · 7fb4e01
1 parent dd44c71
commit 7fb4e01
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 48 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -151,7 +151,8 @@
     "react-helmet-async": "^1.3.0",
     "react-phone-number-input": "^3.1.11",
     "react-player": "^2.9.0",
-    "react-router-dom": "~5.2.0",
+    "react-router-dom": "^5.3.4",
+    "react-router-dom-v5-compat": "^6.21.1",
     "react-share": "^4.4.1",
     "react-slick": "^0.28.1",
     "react-svg": "^14.1.9",

diff --git a/src/App.jsx b/src/App.jsx
@@ -380,7 +380,7 @@ class App extends Component {
                       if (showReadyLight) {
                         return <ReadyLight showReadyHeavy={this.setShowReadyHeavy} />;
                       } else {
-                        return <Redirect to="/ready" />;
+                        return <Route render={() => <Redirect to="/ready" />} />;
                       }
                     }}
                   </Route>

diff --git a/src/index.jsx b/src/index.jsx
@@ -1,9 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { HelmetProvider } from 'react-helmet-async';
+import { CompatRouter } from 'react-router-dom-v5-compat';
+import App from './App';
 import ErrorBoundary from './js/common/components/Widgets/ErrorBoundary';
 import WeVoteRouter from './js/common/components/Widgets/WeVoteRouter';
-import App from './App';
 import { isAndroid } from './js/common/utils/cordovaUtils';
 // importStartCordovaToken -- Do not remove this line!
 
@@ -38,9 +39,11 @@ function startReact () {
   ReactDOM.render(
     <ErrorBoundary>
       <WeVoteRouter>
-        <HelmetProvider>
-          <App />
-        </HelmetProvider>
+        <CompatRouter>
+          <HelmetProvider>
+            <App />
+          </HelmetProvider>
+        </CompatRouter>
       </WeVoteRouter>
     </ErrorBoundary>,
     document.getElementById('app'),