Fix: `Cannot read properties of undefined (reading '_leaflet_pos')`

Trigger: Ad-hoc bug fix request (goal fix error) Date: 2026-07-23 08:51 WIB Affected file: src/components/admin/AgentLocationMap.tsx

Root Cause

Leaflet's zoom/fade animations are async. They read _leaflet_pos from DOM pane elements during a transitionend callback. When React StrictMode double-invokes effects or HMR triggers a remount, the container is removed while Leaflet's animation callback is still scheduled, causing the crash.

IndonesiaAgentMap.tsx (dashboard) already had zoomAnimation: false as a documented fix. AgentLocationMap.tsx (admin/agents page) did NOT have these flags - that was the bug.

Fix Applied

Added zoomAnimation: false, fadeAnimation: false, markerZoomAnimation: false to L.map() options
Added animate: false to fitBounds() during initial render and in resetView()
Wrapped cleanup remove() in try/catch for extra safety

Outcome

Fix applied via HMR to already-running dev server (port 3000). No TypeScript errors.

Notes for Next Time

All new Leaflet map components must include these three animation flags
This is a Leaflet 1.x + React StrictMode incompatibility

1.2 KiB Raw Blame History

Fix: Cannot read properties of undefined (reading '_leaflet_pos')

Root Cause

Fix Applied

Outcome

Notes for Next Time

1.2 KiB

Raw Blame History

Fix: `Cannot read properties of undefined (reading '_leaflet_pos')`