Leaflet integration issue
Hi there,
I'm trying to use leaft & react-leaflet and struggling on the SSR behavior. I tried to wrap the map with the
ClientOnly component but it does not work. Is this because the library is still loaded/evaluated during the SSR ?
Next.js use the dynamic import system but is there an equivalent for the router ?
How to handle this case correctly ?
Thanks !5 Replies
harsh-harlequin•2mo ago
using router or start for SSR?
can you please provide a complete minimal example?
deep-jade•2w ago
Ill follow up, as i'm running into a similar problem
I'm using Start and the latest versions of all deps and also am isolating all (react)-leaflet code into's own component and wrapping it around
ClientOnly
Wrapping it around ClientOnly seemed to be working in older versions of tanstack start, but it seems something's changed in the past month or two that's broken it or completely stopped it from rendering the page
I haven't touched my code in awhile and it's a side-project so I hadn't had a reason to update deps in awhile nor do i remember if the error was showing up before and tss was just allowing it render anyway 🤷
Here's the error:
I'm happy to share code if that would help
However i could experiement with another mapping library until leaft v2 and react-leaftlet are stable
I had claude refactor my mapbox component to use react-map-gl instead but seeing this error regarding useSyncExternalStoreWithSelector consistently regardless of which map component i use
harsh-harlequin•2w ago
we have a bunch of fixes for start and vite especially coming up for those kind of errors soon
deep-jade•2w ago
The map still does not load, it just renders the fallback in
ClientOnly and there's no error saying for why the component failed to renderevident-indigo•2w ago
Use lazy + suspense + ClientOnly