TypeError: Illegal constructor when using AdvancedMarker

[rbd2q]

Hello,

I’m encountering an issue with the AdvancedMarker component. When I navigate from one page that uses a map with AdvancedMarker to another page that also uses a map, I receive a TypeError: Illegal constructor error. However, if I replace AdvancedMarker with Marker, the error does not occur and everything works as expected. Interestingly, reloading the page seems to fix the problem.

Here’s the relevant code:

Map component:

export const AppMap = ({ classNames, children, ...restProps }: MapProps): ReactElement => {
  return (
    <APIProvider apiKey={mapConfig.apiKey ?? ''} libraries={['marker']}>
      <Map className={classNames?.base} {...mapConfig} {...restProps}>
        {children}
      </Map>
    </APIProvider>
  );
};

Usage of Map component on the first page:

<AppMap
      defaultCenter={{ lat: item.latitude, lng: item.longitude }}
      classNames={{ base: styles.location__map }}>
      <MapMarker position={{ lat: item?.latitude, lng: item?.longitude }} />
</AppMap>

Usage of Map component on the second page:

<AppMap
     defaultCenter={mapCoordinates}
     onCameraChanged={handleChangeCenter}
     classNames={{ base: styles.locationstep__map }}>
     {location?.latitude && location?.longitude && (
       <MapMarker position={{ lat: location.latitude, lng: location.longitude }} />
      )}
</AppMap>

MapMarker component:

export const MapMarker = ({ position, label, onClick, classNames, iconName }: MarkerProps): ReactElement => {
  return (
    <AdvancedMarker className={styles.marker} position={position} onClick={onClick}>
      <div className={clsx(styles.marker__badge, classNames?.badge)}>
        <Icon name={iconName || 'anchor_fill'} theme='light' />
      </div>
      {label && <div className={styles.marker__label}>{label}</div>}
    </AdvancedMarker>
  );
};

Any guidance on why this error might be occurring and how to resolve it would be greatly appreciated. Thank you!

[usefulthink]

Have a look here: #225 – that should at least explain where this error comes from and some tips to debug it.

[usefulthink]

I would think that moving the APIProvider up in your component hierarchy to where it will be used by both pages is likely to solve this problem for you, but this shouldn't happen even in this situation. Would you be able to create a small example on codesandbox or similar so I can have a look at it?

[rbd2q]

Moving the APIProvider up to other application providers results in a different error

[usefulthink]

this is getting really strange now :/
I'm not an expert when it comes to next.js, is there an easy way for me to set up an example where I can debug this?

[rbd2q]

While setting up an example I’ve discovered that the issue was caused by the useLoadScript function from the @react-google-maps/api library, which was used in one of my wrapper components. After removing its usage, the problem no longer occurs 🤔

[usefulthink]

Interesting, glad you found it! I think theres not much we could do to detect this..