shadow-cljs编译react-leaflet项目生产环境报replace未定义错误本地无法复现

问题根因 #

报错堆栈指向Leaflet的getTileUrl方法执行时调用了replace，但操作的目标值为undefined，本质是你传入TileLayer组件的瓦片配置中url字段不存在/为空。
本地开发无问题、生产环境复现的核心原因通常是两类：生产环境的资源加载时序和本地不同，或者shadow-cljs生产编译的高级优化混淆了字段名。

排查方案 #

• 先在生产环境加日志验证selected-tileset的取值：在map-component函数开头打印(js/console.log "tileset config" selected-tileset "url value" (:url selected-tileset))，确认生产环境下是否能正常拿到url字段。
• 检查::subs/selected-tileset-or-default订阅是否有兜底默认值，是否存在异步加载还未完成就返回空配置的情况。
• 确认selected-tileset的来源，如果是从JS侧接口/第三方库返回的对象，没有配置externs的情况下，shadow-cljs生产编译会把JS对象的字段名压缩混淆，导致用cljs的关键字读取不到对应值。

修复方案 #

1. 加非空判断再渲染TileLayer，避免url为空时触发报错：

(when (seq (:url selected-tileset))
  [:> TileLayer selected-tileset])

2. 如果是字段被混淆的问题，要么把JS返回的配置提前转为CLJS Map，要么用JS原生方法读取字段避免被优化：

;; 读取JS对象的url字段不受编译优化影响
(goog.object/get selected-tileset "url")

3. 给订阅::subs/selected-tileset-or-default补充兜底默认瓦片配置，确保任何时候返回的配置都带有合法的url字段。

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