Atlaslog
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().

Last verified 2026-11-03 · Multiple versions · Cite this page
Applies to: Leaflet / Vite
Symptom
Checklist
  1. Print L.version from the console and the version declared in package.json.
  2. Search the HTML for additional leaflet.js script tags.
  3. Compare class identity between window.L and the imported module.
  4. 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 function
console.log('global L', window.L && window.L.version);
console.log('bundle L', importedL.version);
console.log('同一个类?', window.L.Map === importedL.Map);   // false
Watch out
All 120 field notesChinese originalRunnable examples
English edition written for Atlaslog from the original Chinese field note. Code is unchanged and runs as-is.
Cite this page

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).