Description
When using <Map reuseMaps />, the app can crash after Google Maps fails to load and the map component is unmounted/remounted.
In my case, this happens when Google Maps resources are unavailable due to network restrictions, for example when VPN is disabled. The first map open fails to load. Then I hide/unmount the map and click view/mount again. On the second mount, the app crashes with:
Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
This seems to happen in the cached-map reuse path. The relevant source appears to be:
if (reuseMaps && CachedMapStack.has(cacheKey)) {
map = CachedMapStack.pop(cacheKey) as google.maps.Map;
mapDiv = map.getDiv();
container.appendChild(mapDiv);
map.setOptions(mapOptions);
}
After the failed-load scenario, the cached map instance seems to return an invalid value from map.getDiv(), so container.appendChild(mapDiv) throws.
Removing reuseMaps avoids the crash.
<img width="1871" height="1139" alt="Image" src="https://github.com/user-attachments/assets/97ba8f7b-c8aa-4c0e-9c62-190db7e4cbe5" />
### Steps to Reproduce
```md
1. Render a Google map with `<Map reuseMaps />` inside `<APIProvider />`.
2. Make Google Maps resources unavailable, for example by disabling VPN or blocking access to Google Maps in a restricted network.
3. Open/mount the map component.
4. Let the map fail to load.
5. Hide/unmount the map component.
6. Show/mount the map component again.
7. The app crashes with `appendChild` / `parameter 1 is not of type 'Node'`.Minimal component shape:
const Example = () => {
const [visible, setVisible] = React.useState(false);
return (
<>
<button onClick={() => setVisible((value) => !value)}>
{visible ? "Hide Map" : "View Map"}
</button>
{visible && (
<APIProvider apiKey={API_KEY}>
<Map
defaultCenter={{ lat: 25.2048, lng: 55.2708 }}
defaultZoom={11}
mapId="DEMO_MAP_ID"
reuseMaps
style={{ height: 320, width: "100%" }}
/>
</APIProvider>
)}
</>
);
};Environment
- Library version: @vis.gl/react-google-maps@1.8.3
- Google Maps version: weekly
- React version: 18
- Browser and Version: Chrome, 146.0.7680.178
- OS: macOS 15.7.5
- Package manager: Yarn
Logs
Description
When using
<Map reuseMaps />, the app can crash after Google Maps fails to load and the map component is unmounted/remounted.In my case, this happens when Google Maps resources are unavailable due to network restrictions, for example when VPN is disabled. The first map open fails to load. Then I hide/unmount the map and click view/mount again. On the second mount, the app crashes with:
Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.This seems to happen in the cached-map reuse path. The relevant source appears to be:
Minimal component shape:
Environment
Logs