TypeError: undefined is not an object (evaluating 'e.width')

[nikischin]

I am trying to implement this plugin into my application. First of all thank you so much for providing this library, this is great!

However, while playing around I ran into the following issue:

export default function LocationOverviewMap () {
    const locations = [ {
        id: 1,
        lat: 48,
        lon: 9,
        title: 'Test 1 48 9',
    },
    {
        id: 2,
        lat: 49,
        lon: 9,
        title: 'Test 2 49 9',
    },
    {
        id: 3,
        lat: 48,
        lon: 10,
        title: 'Test 3 48 10',
    } ];

    const [ selectedLocation, setSelectedLocation ] = useState();

    return (
        <><div className='window-split-main'>
            <Header />
            <div style={{ height: 'calc(100vh - 60px)' }}>
                <Map
                    token="my token ..."
                    isRotationEnabled={false}
                    isZoomEnabled={true}
                    showsCompass={0}
                    showsMapTypeControl={true}
                    showsUserLocation={true}
                    showsUserLocationControl={true}
                    showsPointsOfInterest={false}
                    mapType={0}
                >
                    {locations.map(location=> (<React.Fragment key={location.id}>
                        <Marker
                            latitude={location.lat}
                            longitude={location.lon}
                            color='#333'
                            glyphImage={{ 1: 'https://externalimageurl.com' }}
                            onSelect={()=> setSelectedLocation(location.id)}
                        />
                        <Annotation
                            latitude={location.lat}
                            longitude={location.lon}
                            title={location.title}
                            selected={selectedLocation === location.id}
                        />
                    </React.Fragment>))}
                </Map>
            </div>
        </div></>
    );
}

The error happens whenever I click on one of the markers and an Annotation is visible. Not sure if I am doing the implementation wrong or what is the issue here.

Also when playing around with the Storybook I often after some time get an error like this, not sure if this is similar to the first error in my error log and has something to do with this error:

[nikischin]

For the sourcemap console.log it looks like the issue is described here: https://developer.apple.com/forums/thread/724005

Unfortunately I cannot upvote or comment as login to the forum is buggy for me. However, this does not look like it has anything to do with the error described.

[Nicolapps]

Thank you for the bug report! The source map warning you have is caused by MapKit JS. I opened a bug report on Apple’s bug tracker ([FB13112020](https://openradar.appspot.com/FB13112020)). For the last bug you reported, I’m not sure what’s going on, and I opened a new issue (#43) to track it.

I could not reproduce the bug you are experiencing with your example. I tried to run the code in Storybook, but I don’t see errors when clicking on the annotations.

Are there some specific steps I need to follow to reproduce the bug?

The use of <Annotation> with no child looks suspicious. Have you tried to use a fragment instead, or a zero-size div instead?

[nikischin]

Hi @Nicolapps,

thank you so much for your investigation. This was my very first implementation and currently I am using another implementation not facing this issue. Also honestly I agree that this implementation did not make so much sense.

Main reason to use the implementation like this was the fact that I wanted the default marker but with a callout, so as the marker doesn't have a callout I used the one of the annotation. As soon as we will allow custom Callouts, this will be obsolete anyhow.

In addition I tried to reproduce my own bug and for some reason wasn't able to do so. So I think we can close this ticket and keep #43 :)

[Nicolapps]

Okay, thank you for the update!