fix: restore map rendering by upgrading react-map-gl to v8 - #13
Merged
Merged
Conversation
#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 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
5 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The bug
The landing page's live route preview renders its frame, stats and attribution, but no basemap tiles and no route line. This affects every map in the product, not just the landing page —
Dashboard.tsxanddemo/DemoDashboard.tsxrender the sameMapContainer.Root cause
#4 bumped
maplibre-gl4.7.1 → 6.4.1 to fix a critical XSS advisory. Butreact-map-gl@7.1.9declares:Installing v6 violated that range. 7.x's
mapbox-legacy/utils/transformcalls.clone()on a maplibre internal that v6 reshaped, so the map mounted a canvas and then threw before painting anything:That is exactly the compatibility risk flagged when #4 was merged — the security fix was right, this is the fallout.
The fix
Upgrade to
react-map-gl@8.1.3, which re-exports the same components from@vis.gl/react-mapbox/@vis.gl/react-maplibre. Those declaremaplibre-gl: ">=4.0.0"— no upper bound — so v6 is supported and the security fix stays in place.v8 drops the root export, so one import moves:
from 'react-map-gl'→from 'react-map-gl/mapbox'from 'react-map-gl/maplibre'— unchangedVerified before changing the import: all five components used here (
Source,Layer,Marker,NavigationControl,FullscreenControl) exist on both subpaths, andmapbox-gl@3.18.0already satisfies@vis.gl/react-mapbox's>=3.5.0floor, so no second bump is needed.Test plan
pnpm lint— cleanpnpm typecheck— clean (would have caught any v8 API drift)pnpm test— 35 passed, 6 skippedpnpm build— okreact-map-gl@8.1.3(mapbox-gl@3.18.0)(maplibre-gl@6.4.1)with no peer violationcloneTypeError andCan't resolve 'react-map-gl'errors are gone from a clean page loadI could not visually confirm that tiles actually paint. My headless browser cannot composite WebGL: loading production uplotr.com (unmodified, pre-fix code) in the same browser produced an identical blank canvas and
readPixels→[0,0,0,0]. Since that is the code this PR does not touch, the blank canvas is a limitation of my tooling, not a signal about this change.So the evidence here is that the crash is fixed (console errors gone, peer range satisfied, build green). Someone should open the preview deployment in a real browser and confirm the basemap and the blue route line both render — on the landing page,
/demo, and the dashboard.🤖 Generated with Claude Code