Upgrade deps (#433)

* update openlayers deps

* update react, webpack etc deps

* no need for any cast

Author: karussell

package-lock.json

@@ -18,35 +18,35 @@
         "custom-model-editor": "github:graphhopper/custom-model-editor#5ebd80570329f7abfc95c39624be1f1a379cf392",
         "geojson": "^0.5.0",
         "heightgraph": "github:easbar/Leaflet.Heightgraph#5f4f0b1fff3646aa071981381f5955c9e6f111f0",
-        "ol": "10.4.0",
-        "ol-mapbox-style": "12.5.0",
-        "react": "^18.3.1",
-        "react-dom": "^18.3.1",
+        "ol": "10.6.1",
+        "ol-mapbox-style": "13.1.0",
+        "react": "^19.1.1",
+        "react-dom": "^19.1.1",
         "react-responsive": "^10.0.1"
     },
     "devDependencies": {
-        "@svgr/webpack": "^8.0.1",
-        "@types/geojson": "^7946.0.10",
-        "@types/jest": "^29.4.1",
-        "@types/react": "^18.0.21",
-        "@types/react-dom": "^18.0.6",
-        "copy-webpack-plugin": "^11.0.0",
-        "css-loader": "^6.7.1",
-        "favicons": "^7.0.1",
-        "favicons-webpack-plugin": "^6.0.0-alpha.1",
-        "html-webpack-plugin": "^5.5.0",
-        "jest": "^29.4.1",
-        "jest-environment-jsdom": "^29.4.1",
+        "@svgr/webpack": "^8.1.0",
+        "@types/geojson": "^7946.0.16",
+        "@types/jest": "^30.0.0",
+        "@types/react": "^19.1.10",
+        "@types/react-dom": "^19.1.7",
+        "copy-webpack-plugin": "^13.0.1",
+        "css-loader": "^7.1.2",
+        "favicons": "^7.2.0",
+        "favicons-webpack-plugin": "^6.0.1",
+        "html-webpack-plugin": "^5.6.4",
+        "jest": "^30.0.5",
+        "jest-environment-jsdom": "^30.0.5",
         "jest-fetch-mock": "^3.0.3",
-        "prettier": "2.8.8",
-        "source-map-loader": "^4.0.0",
-        "style-loader": "^3.3.1",
-        "ts-jest": "^29.1.4",
-        "ts-loader": "^9.4.2",
-        "typescript": "^5.1.3",
-        "webpack": "^5.75.0",
-        "webpack-cli": "^5.0.1",
-        "webpack-dev-server": "^4.11.1",
-        "webpack-merge": "^5.8.0"
+        "prettier": "3.6.2",
+        "source-map-loader": "^5.0.0",
+        "style-loader": "^4.0.0",
+        "ts-jest": "^29.4.1",
+        "ts-loader": "^9.5.2",
+        "typescript": "^5.9.2",
+        "webpack": "^5.101.3",
+        "webpack-cli": "^6.0.1",
+        "webpack-dev-server": "^5.2.2",
+        "webpack-merge": "^6.0.1"
     }
 }

package.json

@@ -1,7 +1,6 @@
 import { Map, Overlay } from 'ol'
-import { useEffect, useRef, useState } from 'react'
+import {JSX, useEffect, useRef, useState} from 'react'
 import { fromLonLat } from 'ol/proj'
-
 import { Coordinate } from '@/utils'
 
 interface MapPopupProps {
@@ -12,15 +11,19 @@ interface MapPopupProps {
 
 export default function MapPopup({ map, coordinate, children }: MapPopupProps) {
     const [overlay, setOverlay] = useState<Overlay | undefined>()
-    const container = useRef<HTMLDivElement | null>(null)
+    const container = useRef<HTMLDivElement>(null)
 
     useEffect(() => {
-        const overlay = new Overlay({
+        const newOverlay = new Overlay({
             element: container.current!,
             autoPan: false,
         })
-        setOverlay(overlay)
-        map.addOverlay(overlay)
+        setOverlay(newOverlay)
+        map.addOverlay(newOverlay)
+
+        return () => {
+            map.removeOverlay(newOverlay)
+        }
     }, [map])
 
     useEffect(() => {

src/layers/MapPopup.tsx

@@ -50,7 +50,7 @@ export default function useExternalMVTLayer(map: Map, externalMVTLayerEnabled: b
             },
         })
 
-        const onHover = (e: MapBrowserEvent<UIEvent>) => {
+        const onHover = (e: MapBrowserEvent) => {
             selectionSource.clear()
             const features = map.getFeaturesAtPixel(e.pixel, {
                 layerFilter: l => l === externalMVTLayer,

src/layers/UseExternalMVTLayer.tsx

@@ -32,7 +32,7 @@ export default function useRoutingGraphLayer(map: Map, routingGraphEnabled: bool
             zIndex: 0.6,
         })
 
-        const onHover = (e: MapBrowserEvent<UIEvent>) => {
+        const onHover = (e: MapBrowserEvent) => {
             const features = map.getFeaturesAtPixel(e.pixel, {
                 layerFilter: l => l === routingGraphLayer,
                 hitTolerance: 5,

src/layers/UseRoutingGraphLayer.tsx

@@ -17,10 +17,10 @@ interface PathDetailsProps {
 
 export default function ({ selectedPath }: PathDetailsProps) {
     // keep a ref to the container to determine the size of the graph,
-    const containerRef: React.RefObject<HTMLDivElement> = useRef(null)
+    const containerRef: React.RefObject<HTMLDivElement | null> = useRef(null)
 
     // keep a ref to the container of the actual graph and pass it to the graph once the container is mounted
-    const heightgraphRef: React.RefObject<HTMLDivElement> = useRef(null)
+    const heightgraphRef: React.RefObject<HTMLDivElement | null> = useRef(null)
     const [graph, setGraph] = useState<any | null>(null)
     useEffect(() => {
         const options = {

src/pathDetails/PathDetails.tsx

@@ -1,8 +1,7 @@
-import { ReactNode, useCallback, useEffect, useRef, useState } from 'react'
+import {JSX, ReactNode, useCallback, useEffect, useRef, useState} from 'react'
 import { QueryPoint, QueryPointType } from '@/stores/QueryStore'
 import { Bbox, GeocodingHit, ReverseGeocodingHit } from '@/api/graphhopper'
 import Autocomplete, { AutocompleteItem, GeocodingItem, POIQueryItem } from '@/sidebar/search/AddressInputAutocomplete'
-
 import ArrowBack from './arrow_back.svg'
 import Cross from '@/sidebar/times-solid-thin.svg'
 import CurrentLocationIcon from './current-location.svg'

src/sidebar/search/AddressInput.tsx

@@ -4,6 +4,7 @@
         "sourceMap": true,
         "noImplicitAny": true,
         "jsx": "react-jsx",
+        "jsxImportSource": "react",
         "allowSyntheticDefaultImports": true,
         "baseUrl": ".",
         "importHelpers": true,

tsconfig.json

@@ -53,6 +53,8 @@ module.exports = {
                         options: {
                             modules: {
                                 localIdentName: '[path][name]__[local]',
+                                namedExport: false,
+                                exportLocalsConvention: 'as-is',
                             },
                         },
                     },

webpack.common.js

@@ -8,7 +8,6 @@ const develop = {
     devtool: 'source-map',
     devServer: {
         static: path.resolve(__dirname, 'dist'),
-        https: false,
         port: 3000,
         host: '0.0.0.0',
     },