reactjsleafletreact-leaflet

Why whenever i call MapContainer I always get "React-leaflet Error: Dispatcher is null"?

I am at my first experiments with React-Leaflet, so after installing everything i treid to add a simple map in my React App, but whenever i call MapContainer the only thing I obtain is this error log:

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

Given my lack of experience i also tried to start by copypasting this example

simple-map

but the error stays the same...

I report here my version setting for the react/react-leaflet installation:

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

I also tried to use an ESM import, in that case I get another error:

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

Thank you all for your suggestions!

Solution

  • I really don't know why it wasn't working, but today i just uninstalled and reinstalled everything from nvm to react-leaflet and now everything seems to work correctly! I think it had something to do with the order in which I installed various modules but I am not sure...anyway now everything is fine! Thanks to those who took their time to read my problem!