Error: [react-leaflet-component-marker] Expected marker with id 'marker-:r9:' to be rendered, but none was found.

[fluse]

i got this error

Expected marker with id 'marker-:r9:' to be rendered, but none was found.

import { Marker as LeafletMarker } from '@adamscybot/react-leaflet-component-marker'
import { useRouter } from 'next/router'
import { StyledPin } from './styles'

const StyledMarker = ({ uid }) => {
  const router = useRouter()
  const goToRoute = () => {
    router.push(`/locations/${uid}`)
  }

  return (
    <>
      <StyledPin onClick={goToRoute}>&nbsp;</StyledPin>
    </>
  )
}

interface CustomMarkerProps {
  id: string
  uid: string
  lng: number
  lat: number
}

const Marker: React.FC<CustomMarkerProps> = ({ lng, lat, ...rest }) => {
  return (
    <LeafletMarker
      icon={<StyledMarker {...rest} />}
      position={[lat, lng]}
    />
  )
}

export default Marker

[adamscybot]

Hi @fluse, sorry for the delay. That is indeed strange.

I think SSR (nextjs) has something to do with this. My tests don't use SSR. I can have a think about ways I could somehow make a library change to ensure compatibility, but in the meantime you could use this trick to load the lib and see if it works? https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading#with-no-ssr

I got it working on NextJs by using this on the level of the component that contains the entire map:

https://stackblitz.com/edit/nextjs-rbfs9s?file=app%2FMap.tsx

But I'm wondering about the approach you took to getting Leaflet itself to work in next, and if that specific invocation is the cause. Let me know.

[adamscybot]

@fluse You might want to also try version 2.0.0 just published. Note there are API changes though in this version. I have removed the throwing that would occur if this did execute server side.

[adamscybot]

Im going to close. If you continue to see the issue please comment / recreate.