useLeafletContext() can only be used in a descendant of <MapContainer>

[creimers]

Hi,

I'm trying to use the VectorTileLayer component with react-leaflet and nextjs 11. I haven't been able to work around this error though:

Unhandled Runtime Error

Error: No context provided: useLeafletContext() can only be used in a descendant of <MapContainer>
Call Stack
useLeafletContext
node_modules/@react-leaflet/core/esm/context.js (9:0)
useLayer
node_modules/@react-leaflet/core/esm/layer.js (19:37)
LeafComponent
node_modules/@react-leaflet/core/esm/component.js (41:5)
renderWithHooks
node_modules/react-dom/cjs/react-dom.development.js (14985:0)
updateForwardRef
node_modules/react-dom/cjs/react-dom.development.js (17044:0)
beginWork
node_modules/react-dom/cjs/react-dom.development.js (19098:0)
...

Any idea why this might be occuring? I literally just copied from your example and replaced the access token with mine...

Thanks!

[ted-piotrowski]

@creimers This appears to be a server side rendering error. Can you confirm? If yes, then it appears a limitation of React Leaflet which does not do server side rendering.

Some workarounds may be found here: PaulLeCam/react-leaflet#45

[ted-piotrowski]

@creimers which version of React Leaflet are you using?