Atlaslog / Field Notes / Build & deployment
Field note · Build & deployment
Two Leaflet copies on one page break map.remove()
Quick answer
The host page loads Leaflet 1.7.1 from a CDN while the embedded app bundles 1.9.4, and both assign to window.L, so the later copy wins. Layers created by the other copy fail instanceof checks inside map.remove().
Symptom
- Uncaught TypeError: map.remove is not a function at MapPanel.destroy (MapPanel.vue:88).
- window.L.version prints 1.7.1 while the bundled module reports 1.9.4.
- window.L.Map === importedL.Map is false, and marker icons change style once the second copy loads.
Checklist
- Print L.version from the console and the version declared in package.json.
- Search the HTML for additional leaflet.js script tags.
- Compare class identity between window.L and the imported module.
- Check whether the map renders but its methods fail.
Fix
Keep exactly one copy by declaring leaflet as a rollup external with globals { leaflet: 'L' } (or webpack externals), or remove the CDN tag and import from npm, assigning window.L only once.
Code
Uncaught TypeError: map.remove is not a function
at MapPanel.destroy (MapPanel.vue:88)
Uncaught TypeError: layer.addTo is not a functionconsole.log('global L', window.L && window.L.version);
console.log('bundle L', importedL.version);
console.log('同一个类?', window.L.Map === importedL.Map); // false
Watch out
- Setting window.L = importedL while the CDN copy is already loaded replaces the global but leaves existing map instances on the old classes.
- Bundling Leaflet twice and only deduplicating the CSS leaves the JavaScript class duplication intact.
English edition written for Atlaslog from the original Chinese field note. Code is unchanged and runs as-is.
Atlaslog (2026). Two Leaflet copies on one page break map.remove(). https://www.jingweizhi.com/en/cookbook/global-variable-conflict.html (accessed 2026-11-03).