调用MapContainer时持续出现React-leaflet错误：Dispatcher is null

问题描述 #

首次尝试使用React-Leaflet，完成安装后在React应用中添加简单地图，但每次调用MapContainer都会报错。复制官方示例代码后问题依旧。尝试改用ESM导入时，出现另一种空引用错误。

错误日志 #

常规导入时的错误 #

Uncaught runtime errors:
ERROR
dispatcher is null
useState@http://localhost:3000/static/js/bundle.js:40408:7
MapContainerComponent@http://localhost:3000/static/js/bundle.js:83308:66
renderWithHooks@http://localhost:3000/static/js/bundle.js:61725:31
updateForwardRef@http://localhost:3000/static/js/bundle.js:64294:24
beginWork@http://localhost:3000/static/js/bundle.js:66341:20
callCallback@http://localhost:3000/static/js/bundle.js:51321:18
invokeGuardedCallbackDev@http://localhost:3000/static/js/bundle.js:51365:20
invokeGuardedCallback@http://localhost:3000/static/js/bundle.js:51422:35
beginWork$1@http://localhost:3000/static/js/bundle.js:71286:32
performUnitOfWork@http://localhost:3000/static/js/bundle.js:70534:16
workLoopSync@http://localhost:3000/static/js/bundle.js:70457:26
renderRootSync@http://localhost:3000/static/js/bundle.js:70430:11
performConcurrentWorkOnRoot@http://localhost:3000/static/js/bundle.js:69825:78
workLoop@http://localhost:3000/static/js/bundle.js:77837:46
flushWork@http://localhost:3000/static/js/bundle.js:77815:18
performWorkUntilDeadline@http://localhost:3000/static/js/bundle.js:78052:25

ESM导入时的错误 #

Uncaught runtime errors:
l.current is null
U</n.useState@https://esm.sh/stable/react@18.2.0/es2022/react.mjs:2:6874
y@https://esm.sh/v135/react-leaflet@4.2.1/es2022/MapContainer.js:2:651
renderWithHooks@http://localhost:3000/static/js/bundle.js:32982:31
updateForwardRef@http://localhost:3000/static/js/bundle.js:35551:24
beginWork@http://localhost:3000/static/js/bundle.js:37598:20
callCallback@http://localhost:3000/static/js/bundle.js:22578:18
invokeGuardedCallbackDev@http://localhost:3000/static/js/bundle.js:22622:20
invokeGuardedCallback@http://localhost:3000/static/js/bundle.js:22679:35
beginWork$1@http://localhost:3000/static/js/bundle.js:42543:32
performUnitOfWork@http://localhost:3000/static/js/bundle.js:41791:16
workLoopSync@http://localhost:3000/static/js/bundle.js:41714:26
renderRootSync@http://localhost:3000/static/js/bundle.js:41687:11
performConcurrentWorkOnRoot@http://localhost:3000/static/js/bundle.js:41082:78
workLoop@http://localhost:3000/static/js/bundle.js:49094:46
flushWork@http://localhost:3000/static/js/bundle.js:49072:18
performWorkUntilDeadline@http://localhost:3000/static/js/bundle.js:49309:25

环境版本信息 #

• nvm 0.39.7
• node 18.19.0
• npm 10.2.3
• react 18.2.0
• react-leaflet 4.2.1
• leaflet 1.9.4

解决建议 #

1. 确保React上下文有效：MapContainer必须在React组件的渲染流程内使用，不能在非React环境（如原生DOM操作函数）中调用，否则会触发dispatcher is null错误。
2. 重新安装依赖：删除node_modules和package-lock.json，执行npm install，确保所有依赖版本匹配且无损坏。
3. 导入Leaflet样式：在项目入口文件（如index.js）中添加import 'leaflet/dist/leaflet.css';，缺失样式会导致地图容器渲染异常，进而引发空引用错误。
4. 设置地图容器尺寸：给MapContainer添加明确的宽高样式，比如style={{ width: '100%', height: '500px' }}，空尺寸容器会导致元素引用为空。
5. 避免CDN与本地依赖冲突：使用本地安装的React和React-Leaflet，不要混用ESM CDN导入，避免多实例React导致的上下文问题。

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