this fixes mapbox babel

make sure to cleanup (remove web-vitals) once following is fixed:
mapbox/mapbox-gl-js#10565

client/package.json

@@ -15,7 +15,8 @@
     "react-dom": "^17.0.2",
     "react-map-gl": "^6.1.13",
     "react-scripts": "4.0.3",
-    "web-vitals": "^1.0.1"
+    "web-vitals": "^1.0.1",
+    "worker-loader": "^3.0.8"
   },
   "scripts": {
     "start": "react-scripts start",

client/src/App.js

@@ -1,10 +1,10 @@
 import './App.css';
-import {Col, Empty, Layout, List, Row, Typography} from 'antd';
-import ReactMapGL from 'react-map-gl';
 import React, {useEffect, useState} from 'react';
-import axios from 'axios';
+import {Col, Empty, Layout, List, Row, Typography} from 'antd';
 import {ScheduleOutlined,} from '@ant-design/icons';
+import axios from 'axios';
 import moment from "moment";
+import Map from "./Map";
 
 const {Header, Content} = Layout;
 const {Title, Paragraph, Text} = Typography;
@@ -45,30 +45,14 @@ function App() {
     );
 }
 
-function Map() {
-    //todo fill with data
-    const [viewport, setViewport] = React.useState({
-        latitude: 47.377909732589615,
-        longitude: 8.540479916024365,
-        zoom: 12
-    });
-
-    return <ReactMapGL
-        {...viewport}
-        width="100%"
-        height="100%"
-        onViewportChange={(viewport) => setViewport(viewport)}
-    />
-}
-
 function LocationList(props) {
 
     const formatDate = (date) => {
         return moment(date).format("DD MMMM YYYY")
     };
 
     return <div>
-        {props.locations.length ?
+        {props.locations && props.locations.length ?
             <List
                 itemLayout="horizontal"
                 dataSource={props.locations}

client/src/Map.js

@@ -0,0 +1,23 @@
+import React, {useEffect, useState} from 'react';
+import ReactMapGL from 'react-map-gl';
+import mapboxgl from 'mapbox-gl';
+// eslint-disable-next-line import/no-webpack-loader-syntax
+mapboxgl.workerClass = require('worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker').default;
+
+function Map() {
+    //todo fill with data
+    const [viewport, setViewport] = React.useState({
+        latitude: 47.377909732589615,
+        longitude: 8.540479916024365,
+        zoom: 12
+    });
+
+    return <ReactMapGL
+        {...viewport}
+        width="100%"
+        height="100%"
+        onViewportChange={(viewport) => setViewport(viewport)}
+    />
+}
+
+export default Map