From 83be0cc7b4aa3e7501109ace960d272985d13dad Mon Sep 17 00:00:00 2001 From: Bolin Huang <8141232+iblh@users.noreply.github.com> Date: Sat, 12 Sep 2026 20:24:37 -0700 Subject: [PATCH] fix: restore map rendering by upgrading react-map-gl to v8 #4 bumped maplibre-gl 4.7.1 -> 6.4.1 to fix a critical XSS advisory, but react-map-gl@7.1.9 declares `maplibre-gl: ">=1.13.0 <5.0.0"`. Installing v6 violated that range, and 7.x's transform helper called .clone() on a maplibre internal that v6 reshaped, throwing: TypeError: Cannot read properties of undefined (reading 'clone') The map mounted a canvas and then died before painting tiles or the route line, which is why the landing preview showed its frame, stats and attribution but no map. react-map-gl@8.1.3 re-exports the same components from @vis.gl/react-*, which declares `maplibre-gl: ">=4.0.0"` and so accepts v6. v8 drops the root export, so the mapbox import moves to 'react-map-gl/mapbox'; the '/maplibre' subpath is unchanged. All five used components (Source, Layer, Marker, NavigationControl, FullscreenControl) exist on both subpaths, and mapbox-gl@3.18.0 already satisfies @vis.gl/react-mapbox's >=3.5.0 floor. This affects every map in the product, not just the landing page: Dashboard and DemoDashboard render the same MapContainer. Co-Authored-By: Claude Opus 5 --- components/map/MapContainer.tsx | 2 +- package.json | 2 +- pnpm-lock.yaml | 69 +++++++++++++++++++++++++-------- 3 files changed, 54 insertions(+), 19 deletions(-) diff --git a/components/map/MapContainer.tsx b/components/map/MapContainer.tsx index b1fad12..f48c040 100644 --- a/components/map/MapContainer.tsx +++ b/components/map/MapContainer.tsx @@ -8,7 +8,7 @@ import MapboxMap, { Marker, NavigationControl, FullscreenControl, -} from 'react-map-gl'; +} from 'react-map-gl/mapbox'; import MapLibreMap, { Source as MapLibreSource, Layer as MapLibreLayer, diff --git a/package.json b/package.json index 250cada..758d402 100644 --- a/package.json +++ b/package.json @@ -39,7 +39,7 @@ "next-themes": "^0.4.6", "react": "19.2.8", "react-dom": "19.2.8", - "react-map-gl": "^7.1.7", + "react-map-gl": "^8.1.3", "react-markdown": "^10.1.0", "remark-gfm": "^4.0.1", "swr": "^2.2.5", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a082bd5..2c10b8d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -93,8 +93,8 @@ importers: specifier: 19.2.8 version: 19.2.8(react@19.2.8) react-map-gl: - specifier: ^7.1.7 - version: 7.1.9(mapbox-gl@3.18.0)(maplibre-gl@6.4.1)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + specifier: ^8.1.3 + version: 8.1.3(mapbox-gl@3.18.0)(maplibre-gl@6.4.1)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) react-markdown: specifier: ^10.1.0 version: 10.1.0(@types/react@19.2.8)(react@19.2.8) @@ -1488,6 +1488,26 @@ packages: vue-router: optional: true + '@vis.gl/react-mapbox@8.1.3': + resolution: {integrity: sha512-96sCSl8BKoTLn2xMWlkjlR9GA5URM2t5Ln386t8pNVsoINsUXxweyuJ+gJlDe0GgAIOttXreU/1fK9AfrD28NA==} + peerDependencies: + mapbox-gl: '>=3.5.0' + react: '>=16.3.0' + react-dom: '>=16.3.0' + peerDependenciesMeta: + mapbox-gl: + optional: true + + '@vis.gl/react-maplibre@8.1.3': + resolution: {integrity: sha512-5Ntvp8YP94SBRaJXLolw6Q57CtrPdWYxdCIo+JeI63hM9BPEJ1efLcPgfSAAUhzXanDeorTE91GsZAgoXbnB3g==} + peerDependencies: + maplibre-gl: '>=4.0.0' + react: '>=16.3.0' + react-dom: '>=16.3.0' + peerDependenciesMeta: + maplibre-gl: + optional: true + '@vitest/expect@4.1.11': resolution: {integrity: sha512-VX2x5vNJXET47KAFzwERI+KRMtTTCSWTfSMKsW7JsUsXV4psq++e3DvZpuTDOpHcxytiDs6p2nhVb2tVDiiUYw==} @@ -2962,11 +2982,11 @@ packages: react-is@16.13.1: resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==} - react-map-gl@7.1.9: - resolution: {integrity: sha512-KsCc8Gyn05wVGlHZoopaiiCr0RCAQ6LDISo5sEy1/pV/d7RlozkF946tiX7IgyijJQMRujHol5QdwUPESjh73w==} + react-map-gl@8.1.3: + resolution: {integrity: sha512-i8ExMBodZ5waBlnnXhPHfubf1mSQrzVBKsp9LUSWIAQjOuUhI4Dv962rzE2QfI7n5oywunldQlxcW1Mjy8rp7w==} peerDependencies: mapbox-gl: '>=1.13.0' - maplibre-gl: '>=1.13.0 <5.0.0' + maplibre-gl: '>=1.13.0' react: '>=16.3.0' react-dom: '>=16.3.0' peerDependenciesMeta: @@ -3992,7 +4012,7 @@ snapshots: '@maplibre/maplibre-gl-style-spec@19.3.3': dependencies: - '@mapbox/jsonlint-lines-primitives': 2.0.2 + '@mapbox/jsonlint-lines-primitives': 2.0.3 '@mapbox/unitbezier': 0.0.1 json-stringify-pretty-compact: 3.0.0 minimist: 1.2.8 @@ -4702,6 +4722,21 @@ snapshots: next: 16.3.4(@playwright/test@1.62.1)(@types/node@20.19.30)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) react: 19.2.8 + '@vis.gl/react-mapbox@8.1.3(mapbox-gl@3.18.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)': + dependencies: + react: 19.2.8 + react-dom: 19.2.8(react@19.2.8) + optionalDependencies: + mapbox-gl: 3.18.0 + + '@vis.gl/react-maplibre@8.1.3(maplibre-gl@6.4.1)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)': + dependencies: + '@maplibre/maplibre-gl-style-spec': 19.3.3 + react: 19.2.8 + react-dom: 19.2.8(react@19.2.8) + optionalDependencies: + maplibre-gl: 6.4.1 + '@vitest/expect@4.1.11': dependencies: '@standard-schema/spec': 1.1.0 @@ -5227,8 +5262,8 @@ snapshots: '@next/eslint-plugin-next': 16.3.4(eslint@9.39.2(jiti@1.21.7)) eslint: 9.39.2(jiti@1.21.7) eslint-import-resolver-node: 0.3.9 - eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0)(eslint@9.39.2(jiti@1.21.7)) - eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.53.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.2(jiti@1.21.7)) + eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.53.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7)))(eslint@9.39.2(jiti@1.21.7)) + eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.53.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.53.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7)))(eslint@9.39.2(jiti@1.21.7)))(eslint@9.39.2(jiti@1.21.7)) eslint-plugin-jsx-a11y: 6.10.2(eslint@9.39.2(jiti@1.21.7)) eslint-plugin-react: 7.37.5(eslint@9.39.2(jiti@1.21.7)) eslint-plugin-react-hooks: 7.0.1(eslint@9.39.2(jiti@1.21.7)) @@ -5250,7 +5285,7 @@ snapshots: transitivePeerDependencies: - supports-color - eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0)(eslint@9.39.2(jiti@1.21.7)): + eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.53.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7)))(eslint@9.39.2(jiti@1.21.7)): dependencies: '@nolyfill/is-core-module': 1.0.39 debug: 4.4.3 @@ -5261,22 +5296,22 @@ snapshots: tinyglobby: 0.2.17 unrs-resolver: 1.11.1 optionalDependencies: - eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.53.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.2(jiti@1.21.7)) + eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.53.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.53.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7)))(eslint@9.39.2(jiti@1.21.7)))(eslint@9.39.2(jiti@1.21.7)) transitivePeerDependencies: - supports-color - eslint-module-utils@2.12.1(@typescript-eslint/parser@8.53.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.2(jiti@1.21.7)): + eslint-module-utils@2.12.1(@typescript-eslint/parser@8.53.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.53.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7)))(eslint@9.39.2(jiti@1.21.7)))(eslint@9.39.2(jiti@1.21.7)): dependencies: debug: 3.2.7 optionalDependencies: '@typescript-eslint/parser': 8.53.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3) eslint: 9.39.2(jiti@1.21.7) eslint-import-resolver-node: 0.3.9 - eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0)(eslint@9.39.2(jiti@1.21.7)) + eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.53.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7)))(eslint@9.39.2(jiti@1.21.7)) transitivePeerDependencies: - supports-color - eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.53.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.2(jiti@1.21.7)): + eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.53.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.53.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7)))(eslint@9.39.2(jiti@1.21.7)))(eslint@9.39.2(jiti@1.21.7)): dependencies: '@rtsao/scc': 1.1.0 array-includes: 3.1.9 @@ -5287,7 +5322,7 @@ snapshots: doctrine: 2.1.0 eslint: 9.39.2(jiti@1.21.7) eslint-import-resolver-node: 0.3.9 - eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.53.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.2(jiti@1.21.7)) + eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.53.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.53.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7)))(eslint@9.39.2(jiti@1.21.7)))(eslint@9.39.2(jiti@1.21.7)) hasown: 2.0.2 is-core-module: 2.16.1 is-glob: 4.0.3 @@ -6572,10 +6607,10 @@ snapshots: react-is@16.13.1: {} - react-map-gl@7.1.9(mapbox-gl@3.18.0)(maplibre-gl@6.4.1)(react-dom@19.2.8(react@19.2.8))(react@19.2.8): + react-map-gl@8.1.3(mapbox-gl@3.18.0)(maplibre-gl@6.4.1)(react-dom@19.2.8(react@19.2.8))(react@19.2.8): dependencies: - '@maplibre/maplibre-gl-style-spec': 19.3.3 - '@types/mapbox-gl': 3.4.1 + '@vis.gl/react-mapbox': 8.1.3(mapbox-gl@3.18.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + '@vis.gl/react-maplibre': 8.1.3(maplibre-gl@6.4.1)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) react: 19.2.8 react-dom: 19.2.8(react@19.2.8) optionalDependencies: