ES6模块加载Leaflet实例化报错：Uncaught TypeError: L.map is not a function

核心问题 #

你遇到的Uncaught TypeError: L.map is not a function错误，主要由两个原因导致：

1. Leaflet导入路径错误 #

你的文件结构中，leaflet.js位于scripts/lib/目录下，但mapApp.js里的导入路径写成了../lib/leaflet/leaflet.js——多了一层不存在的leaflet子目录，这会导致浏览器无法正确加载Leaflet模块，最终L变量没有获取到Leaflet的API对象，调用L.map自然会报错。

2. mapApp函数未正确导出 #

你的mapApp.js只定义了函数，但没有对外导出，main.js里的import {mapApp}其实无法找到对应的导出项，这是一个潜在问题（当前错误提示未体现，但后续会引发新报错）。

修复步骤 #

步骤1：修正Leaflet导入路径并导出函数 #

修改mapApp.js中的导入语句，同时添加函数导出：

// mapApp.js
import * as L from "../lib/leaflet.js"

function mapApp(container){
    // 原函数逻辑保持不变...
};

// 添加导出语句，让main.js可以导入该函数
export { mapApp };

步骤2：确认模块加载逻辑 #

ES模块有两个关键特性：

• 模块级作用域：每个模块的导入是独立的，不会污染全局作用域
• 自动缓存：浏览器会对已加载的模块进行缓存，不会重复加载

你完全不需要在main.js中重复导入Leaflet，只要mapApp.js里的导入路径正确，就能在该模块内正常使用L对象。

验证修复 #

main.js保持原代码即可，不需要额外导入Leaflet：

// main.js
import {mapApp} from "./app/mapApp.js";

const tester = new mapApp('app')

现在运行代码，应该能正常初始化Leaflet地图了。

内容的提问来源于stack exchange，提问作者PSZ_Code