MM-517 Upgrade dependencies to support newer node (#163)

* Upgrade react-scripts, apollo and related dependencies * Upgrade to node 18 * Upgrade dependencies to their latest minors * Upgrade mui * Upgrade to React v17 * Upgrade to React v18 All but react-router is now updated, but to migrate that MapContainer and some other class components shoud be rewritten in function component format.
HSLdevcom · Aug 14, 2023 · 6817697 · 6817697
1 parent 3fdc8ae
commit 6817697
Show file tree

Hide file tree

Showing 15 changed files with 4,961 additions and 7,231 deletions.
diff --git a/.babelrc b/.babelrc
diff --git a/Dockerfile b/Dockerfile
@@ -1,4 +1,4 @@
-FROM node:16-alpine as builder
+FROM node:18-alpine as builder
 
 ENV WORK /opt/driver-instructions
 
@@ -26,7 +26,7 @@ RUN yarn build
 
 # The actual image comes here
 
-FROM node:16-alpine as server
+FROM node:18-alpine as server
 
 ENV WORK /opt/driver-instructions
 

diff --git a/package.json b/package.json
@@ -4,33 +4,29 @@
   "private": true,
   "homepage": "/kuljettaja",
   "dependencies": {
+    "@apollo/client": "^3.7.17",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@mui/material": "^5.13.7",
     "@turf/turf": "^6.5.0",
-    "apollo-cache-inmemory": "^1.6.2",
-    "apollo-client": "^2.6.3",
-    "apollo-fetch": "^0.7.0",
-    "apollo-link-http": "^1.5.15",
     "classnames": "^2.2.6",
     "dayjs": "^1.10.7",
-    "graphql": "^14.6.0",
-    "graphql-tag": "^2.10.1",
+    "graphql": "^16.7.1",
     "hsl-map-style": "https://github.com/HSLdevcom/hsl-map-style",
-    "leaflet": "^1.6.0",
+    "leaflet": "^1.9.4",
     "leaflet-path-drag": "^1.8.0-beta.3",
     "lodash": "^4.17.11",
     "mapillary-js": "^4.0.0",
-    "material-ui": "^0.20.2",
-    "mobx": "^5.15.4",
-    "mobx-react": "^6.2.2",
+    "mobx": "^6.9.0",
+    "mobx-react": "^7.6.0",
     "prop-types": "^15.7.2",
     "qs": "^6.9.4",
-    "react": "^16.8.6",
-    "react-apollo": "^2.5.6",
-    "react-apollo-hooks": "^0.5.0",
-    "react-dom": "^16.8.6",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-icons": "^4.1.0",
     "react-router-dom": "^5.0.1",
-    "react-scripts": "4.0.3",
-    "react-tabs": "^3.2.3"
+    "react-scripts": "5.0.1",
+    "react-tabs": "^6.0.1"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -53,14 +49,10 @@
     ]
   },
   "devDependencies": {
-    "eslint": "^7",
-    "eslint-config-prettier": "^5.0.0",
-    "eslint-config-react-app": "^6",
-    "eslint-plugin-prettier": "^3.1.0",
-    "prettier": "^1.19.1",
-    "react-error-overlay": "^6.0.9"
-  },
-  "resolutions": {
-    "react-error-overlay": "6.0.9"
+    "eslint": "^8.44.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-config-react-app": "^7.0.1",
+    "eslint-plugin-prettier": "^5.0.0",
+    "prettier": "^3.0.0"
   }
 }
diff --git a/src/components/app.js b/src/components/app.js
@@ -1,12 +1,7 @@
 import React from "react";
 import { BrowserRouter as Router, Route } from "react-router-dom";
 import { Provider } from "mobx-react";
-import { ApolloProvider } from "react-apollo";
-import { ApolloProvider as ApolloHooksProvider } from "react-apollo-hooks";
-import { ApolloClient } from "apollo-client";
-import { HttpLink } from "apollo-link-http";
-import { InMemoryCache } from "apollo-cache-inmemory";
-import MuiThemeProvider from "material-ui/styles/MuiThemeProvider";
+import { ApolloProvider, ApolloClient, HttpLink, InMemoryCache } from "@apollo/client";
 
 import Home from "./home";
 import MapContainer from "./mapContainer";
@@ -52,16 +47,15 @@ const App = () => (
     <ServerMessage />
     <Provider {...stores}>
       <ApolloProvider client={client}>
-        <ApolloHooksProvider client={client}>
-          <MuiThemeProvider>
-            <ErrorBoundary>
-              <Router basename={rootPath}>
-                <Route component={Home} path="/" exact />
-                <Route path={"/map"} component={MapContainer} />
-              </Router>
-            </ErrorBoundary>
-          </MuiThemeProvider>
-        </ApolloHooksProvider>
+        <ErrorBoundary>
+          <Router basename={rootPath}>
+            <Route component={Home} path="/" exact />
+            <Route
+              path={"/map"}
+              render={(props) => <MapContainer {...props} apolloClient={client} />}
+            />
+          </Router>
+        </ErrorBoundary>
       </ApolloProvider>
     </Provider>
   </div>