Update webpack and leaflet

package.json

@@ -14,14 +14,15 @@
   "dependencies": {
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
+    "@fontsource/roboto": "^4.5.8",
     "@mdi/react": "^1.4.0",
     "@mui/material": "^5.10.15",
     "@mui/styles": "^5.10.15",
     "leaflet": "^1.5.1",
     "mqtt": "^4.2.1",
-    "react": "^16.8.6",
+    "react": "^18.2.0",
-    "react-dom": "^16.8.6",
+    "react-dom": "^18.2.0",
-    "react-leaflet": "^2.4.0"
+    "react-leaflet": "^4.1.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.5.5",
@@ -31,29 +32,32 @@
     "@babel/preset-env": "^7.5.5",
     "@babel/preset-flow": "^7.0.0-rc.1",
     "@babel/preset-react": "^7.0.0-rc.1",
-    "@mdi/js": "^5.6.55",
+    "@mdi/js": "^7.0.96",
     "babel-eslint": "^10.0.2",
-    "babel-loader": "^8.0.6",
+    "babel-loader": "^9.1.0",
-    "clean-webpack-plugin": "^3.0.0",
+    "buffer": "^6.0.3",
+    "clean-webpack-plugin": "^4.0.0",
     "core-js": "^3.6.0",
-    "css-loader": "^4.3.0",
+    "css-loader": "^6.7.2",
-    "eslint": "^7.10.0",
+    "eslint": "^8.28.0",
-    "eslint-plugin-flowtype": "^5.2.0",
+    "eslint-plugin-flowtype": "^8.0.3",
     "eslint-plugin-fp": "^2.3.0",
     "eslint-plugin-react": "^7.14.3",
     "eslint-plugin-react-hooks": "^4.1.2",
     "file-loader": "^6.1.0",
     "flow": "^0.2.3",
-    "flow-bin": "^0.135.0",
+    "flow-bin": "^0.193.0",
     "flow-typed": "^3.2.1",
-    "html-webpack-plugin": "^4.5.0",
+    "html-webpack-plugin": "^5.5.0",
-    "husky": "^4.3.0",
+    "husky": "^8.0.2",
     "lodash-es": "^4.17.15",
-    "style-loader": "^1.3.0",
+    "process": "^0.11.10",
-    "webpack": "^4.44.0",
+    "style-loader": "^3.3.1",
-    "webpack-cli": "^3.3.0",
+    "url": "^0.11.0",
-    "webpack-dev-server": "^3.7.2",
+    "webpack": "^5.75.0",
-    "webpack-shell-plugin-next": "^1.2.0"
+    "webpack-cli": "^5.0.0",
+    "webpack-dev-server": "^4.11.1",
+    "webpack-shell-plugin-next": "^2.3.1"
   },
   "license": "MIT"
 }

src/components/App.js

@@ -9,11 +9,7 @@ import throttle from "lodash/throttle";
 
 import type { Config, Control, Topics } from "config/flowtypes";
 
-import {
+import { withStyles } from "@mui/styles";
-  ThemeProvider, withStyles
-} from "@mui/styles";
-import { createTheme } from "@mui/material/styles";
-import * as Colors from "@mui/material/colors";
 import Snackbar from "@mui/material/Snackbar";
 import IconButton from "@mui/material/IconButton";
 import Typography from "@mui/material/Typography";
@@ -206,18 +202,6 @@ class App extends React.PureComponent<AppProps & Classes, AppState> {
   }
 }
 
-const generateTheme = (config: Config) =>
-  createTheme({
-    palette: {
-      primary: Colors[config.space.color]
-    }
-  });
 
-export default (props: AppProps) => {
+
-  const StyledApp = withStyles(App.styles)(App);
+export default withStyles(App.styles)(App);
-  return (
-    <ThemeProvider theme={generateTheme(props.config)}>
-      <StyledApp {...props} />
-    </ThemeProvider>
-  );
-};

src/components/ControlMap.js

@@ -1,6 +1,6 @@
 // @flow
 import React from "react";
-import { Map, ImageOverlay, Marker, LayersControl } from "react-leaflet";
+import { MapContainer, ImageOverlay, Marker, LayersControl } from "react-leaflet";
 import { CRS, point, divIcon } from "leaflet";
 import map from "lodash/map";
 import filter from "lodash/filter";
@@ -45,7 +45,9 @@ const renderMarker = (props: ControlMapProps) =>
       {({ state }) => (
         <Marker position={convertPoint(control.position)}
           icon={createLeafletIcon(control, state)}
-          onClick={() => props.onChangeControl(control)}
+          eventHandlers={{
+            click: () => props.onChangeControl(control)
+          }}
         >
         </Marker>
       )}
@@ -118,13 +120,13 @@ const renderLayers = (props: ControlMapProps) => (
 );
 
 const ControlMap = (props: ControlMapProps) => (
-  <Map center={center(props)}
+  <MapContainer center={center(props)}
     zoom={props.zoom}
     crs={CRS.Simple}
     leaflet={{}}>
     {renderMarkers(props)}
     {renderLayers(props)}
-  </Map>
+  </MapContainer>
 );
 
 export default ControlMap;

src/index.jsx

@@ -2,11 +2,18 @@
 import "core-js/stable";
 import "regenerator-runtime/runtime";
 import "../node_modules/leaflet/dist/leaflet.css";
+import '@fontsource/roboto/300.css';
+import '@fontsource/roboto/400.css';
+import '@fontsource/roboto/500.css';
+import '@fontsource/roboto/700.css';
 
 import React from "react";
 import ReactDOM from "react-dom";
 
 import App from "components/App";
+import { createTheme } from "@mui/material/styles";
+import { ThemeProvider } from "@mui/styles";
+import * as Colors from "@mui/material/colors";
 
 import "../css/styles.css";
 
@@ -16,6 +23,21 @@ const config: Config = window.config;
 
 document.title = `${config.space.name} Map`;
 
+const theme = createTheme({
+  palette: {
+    primary: {
+      main: Colors[config.space.color][500]
+    },
+    secondary: {
+      main: Colors.orange[500]
+    }
+  }
+});
+
 // $FlowFixMe
 const contentElement: Element = document.getElementById("content");
-ReactDOM.render(<App config={config} />, contentElement);
+ReactDOM.render((
+  <ThemeProvider theme={theme}>
+    <App config={config} />
+  </ThemeProvider>
+), contentElement);

webpack.config.js

@@ -8,10 +8,10 @@ const preBuildScripts = process.env.NO_FLOW == undefined ?
   : [];
 
 const configPath = env => {
-  if (env === true) {
+  if (env.length < 3) {
     throw "No config file was provided.";
   }
-  return path.resolve(__dirname, `config/${env}`);
+  return path.resolve(__dirname, `config/${Object.keys(env)[2]}`);
 };
 
 module.exports = env => ({
@@ -25,7 +25,7 @@ module.exports = env => ({
     alias: {
       'lodash': 'lodash-es',
       "leaflet": "leaflet/dist/leaflet-src.esm.js"
-    }
+    },
   },
   output: {
     path: path.resolve(__dirname, 'dist'),
@@ -51,6 +51,10 @@ module.exports = env => ({
     new HtmlWebpackPlugin({
       title: 'Space Map',
       template: 'index.ejs'
-    })
+    }),
+    new webpack.ProvidePlugin({
+      Buffer: ['buffer', 'Buffer'],
+      process: 'process/browser',
+    }),
   ]
 });