ERROR TypeError: Cannot set properties of undefined (setting 'adapter') -- error, after update from 9.0 to 9.1

[neverlose-lv]

I have updated

    "@deck.gl/core": "9.0.38",
    "@deck.gl/google-maps": "9.0.38",
    "@deck.gl/layers": "9.0.38",

to the latest versions:

    "@deck.gl/core": "^9.1.4",
    "@deck.gl/google-maps": "^9.1.4",
    "@deck.gl/layers": "^9.1.4",

And now I have an error in my Angular Ionic project:

ERROR TypeError: Cannot set properties of undefined (setting 'adapter')

Is it the library problem or am I doing something wrong?

My code is:

import { Component, DestroyRef, Input, OnDestroy, OnInit } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { MapTrove } from '@app/entities/trove/interfaces/map-trove';
import { TrovesService } from '@app/entities/trove/services/troves.service';
import { TroveStates } from '@app/entities/trove/trove-states';
import { User } from '@app/entities/user/interfaces/user';
import { AuthenticationRequiredComponent } from '@app/layout/authentication-required/authentication-required.component';
import {
  AuthSelectors,
  DisplayPopup,
  MapViewSelectors,
  SelectMapTrove,
  SetReturnUrl,
} from '@app/store';
import { GoogleMapsOverlay } from '@deck.gl/google-maps';
import { ScatterplotLayer } from '@deck.gl/layers';
import { Store } from '@ngxs/store';
import { Observable, Subscription, take, tap } from 'rxjs';

@Component({
  selector: 'app-map-markers-zoom-in',
  templateUrl: './map-markers-zoom-in.component.html',
  styleUrls: ['./map-markers-zoom-in.component.scss'],
})
export class MapMarkersZoomInComponent implements OnInit, OnDestroy {
  constructor(
    private store: Store,
    private trovesService: TrovesService,
    private destroyRef: DestroyRef,
  ) {}

  private currentUser$: Observable<User | undefined> = this.store.select(
    AuthSelectors.currentUser,
  );

  @Input({ required: true }) map!: google.maps.Map;

  private overlay!: GoogleMapsOverlay;
  private mapTrovesSubscription!: Subscription;

  protected mapTroves$: Observable<MapTrove[]> = this.store.select(
    MapViewSelectors.mapTroves,
  );

  ngOnInit() {
    this.overlay = new GoogleMapsOverlay({
      layers: [],
    });

    this.overlay.setMap(this.map);

    // Subscribe to map troves and update markers dynamically
    this.mapTrovesSubscription = this.mapTroves$.subscribe((mapTroves) => {
      this.overlay.setProps({
        layers: [this.createLayer(mapTroves)],
      });
    });
  }

  private createLayer(markers: MapTrove[]): ScatterplotLayer<MapTrove> {
    // Create a new ScatterplotLayer with the markers data
    return new ScatterplotLayer<MapTrove>({
      id: 'trove-markers-zoom-in',
      data: markers,
      pickable: true,
      radiusUnits: 'meters', // Interpret radius as meters
      getPosition: (mapTrove: MapTrove) => [mapTrove.lng, mapTrove.lat],
      getRadius: (mapTrove: MapTrove) =>
        this.trovesService.getTroveRadius(mapTrove.state), // Radius based on state
      getFillColor: (mapTrove: MapTrove) =>
        mapTrove.state === TroveStates.ACTIVE
          ? [108, 183, 0, 64] // Green fill (RGBA with 25% opacity)
          : [255, 0, 18, 64], // Red fill (RGBA with 25% opacity)
      stroked: true, // Enable stroke for border
      filled: true, // Ensure the circles are filled
      getLineWidth: 2, // Set the border width
      getLineColor: [0, 0, 0, 255], // Set border color to black (RGBA)

      // Add onClick handler to handle clicks on the marker
      onClick: (info) => {
        // Check if a marker (MapTrove) was clicked
        if (info.object) {
          this.onCircleClick(info.object);
        }
      },
    });
  }

  onCircleClick(mapTrove: MapTrove): void {
    this.currentUser$
      .pipe(
        takeUntilDestroyed(this.destroyRef),
        take(1),
        tap((user: User | undefined) => {
          if (user) {
            this.store.dispatch(new SelectMapTrove(mapTrove));
          } else {
            this.store.dispatch(new SetReturnUrl('/map'));
            this.store.dispatch(
              new DisplayPopup(AuthenticationRequiredComponent),
            );
          }
        }),
      )
      .subscribe();
  }

  ngOnDestroy(): void {
    // Clean up the overlay
    this.overlay.finalize();
    if (this.mapTrovesSubscription) {
      this.mapTrovesSubscription.unsubscribe();
    }
  }
}

[luizbalisa]

I had the same problem as you. My solution was to remove:

"@deck.gl/core": "^9.1.4",
"@deck.gl/google-maps": "^9.1.4",
"@deck.gl/layers": "^9.1.4",

and then reinstall only deck.gl.