为什么每当我调用 MapContainer 时我总是收到“React-leaflet Error: Dispatcher is null”？

Question

我第一次尝试使用React-Leaflet，所以在安装完所有内容后，我试图在我的React应用程序中添加一个简单的地图，但是每当我调用MapContainer时，我唯一获得的就是这个错误日志：

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

鉴于我缺乏经验，我也尝试从复制粘贴这个示例开始

简单地图

但错误保持不变...

我在这里报告我的react/react-leaflet安装的版本设置：

nvm 0.39.7 节点 18.19.0 npm 10.2.3 反应18.2.0 反应传单 4.2.1 传单 1.9.4

我还尝试使用 ESM 导入，在这种情况下我收到另一个错误：

Uncaught runtime errors:
l.current is null
U</n.useState@https://esm.sh/stable/[email protected]/es2022/react.mjs:2:6874
y@https://esm.sh/v135/[email protected]/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

谢谢大家的建议！

Answer 1

我真的不知道为什么它不起作用，但今天我刚刚卸载并重新安装了从nvm到react-leaflet的所有内容，现在一切似乎都正常工作了！ 我认为这与我安装各种模块的顺序有关，但我不确定......无论如何，现在一切都很好！感谢那些花时间阅读我的问题的人！