TypeError: Super expression must either be null or a function

[Thanasist2]

"leaflet": "^1.7.1",
"leaflet-ant-path": "^1.3.0",
"react-leaflet": "^3.0.0",
"react-leaflet-ant-path": "^1.1.0",

It stoped working after react-leaflet 3 install

[caritasverein]

I think you don't need this library. You can just use @react-leaflet/[email protected] and the native [email protected]. In my example it works like this:

import { useLeafletContext } from '@react-leaflet/core'
import { antPath } from 'leaflet-ant-path';

export default () => {

    const AntPath = (p) => {
        const context = useLeafletContext()
        useEffect(() => {
            let antPolyline = antPath(p.positions, p.options);
            context.map.addLayer(antPolyline)
            return () => {
                context.map.removeLayer(antPolyline)
            }
        })
        return null
    }
    
    ...

    return (
        <Map>
            <AntPath positions={...} options={}> </AntPath>
        </Map>
    )
}

Of yourse, this is just a quick and dirty example, but you can find your way from here.

[Thanasist2]

Thank you very match, your code is extremely useful!

[caritasverein]

Thank you :-). After some time i came to this. Works a lot better, does not rerender so often and supports children for tooltips and popups.

import { createElementHook, createPathHook, createContainerComponent } from '@react-leaflet/core'
import { antPath } from 'leaflet-ant-path';

function createAntPath(props, context) {
    const instance = antPath(props.positions, props.options)
    return { instance, context: { ...context, overlayContainer: instance } }
}


const useAntPathElement = createElementHook(createAntPath, () => {})
const useAntPath = createPathHook(useAntPathElement)
const AntPath = createContainerComponent(useAntPath)

export default AntPath

[Thanasist2]

a little improvement so be able to update the component

import { createElementHook, createPathHook, createContainerComponent } from '@react-leaflet/core'
import { antPath } from 'leaflet-ant-path';

function createAntPath(props, context) {
    const instance = antPath(props.positions, props.options)
    return { instance, context: { ...context, overlayContainer: instance } }
}

function updateAntPath(instance, props, prevProps) {
    if (props.positions !== prevProps.positions || props.options !== prevProps.options) {
        instance.setLatLngs(props.positions)
    }
}

const useAntPathElement = createElementHook(createAntPath, updateAntPath)
const useAntPath = createPathHook(useAntPathElement)
const AntPath = createContainerComponent(useAntPath)

export default AntPath