TypeError: f.we.apply is not a function

[RijaCloud]

Environment details

1. Api : places
2. Windows 11
3. Lib version : ^1.14.3, nuxt3 rc8

Steps to reproduce

1. Install the latest version of js-api-loader
2. Install a new vue 3 project : vue create hello-world
3. Use the following code

googleApiLoader.ts

import { Loader } from "@googlemaps/js-api-loader";
export const googleApiloader = (key) => {
  return new Loader({
    apiKey: key, //appConfig.GOOGLE_API_KEY,
    version: "weekly",
    libraries: ["places"],
  });
} 

Map.vue

<script lang="ts">
import googleMap from "~~/libs/google";
import { googleApiloader } from "~~/services/common/googleApiLoader";

import DilypseLoading from "~~/components/Dilypse/Loading.vue";
import DilypseText from "~~/components/Dilypse/Text.vue";

export default {
  components: { DilypseLoading, DilypseText },
  props: {
    position: {
      type: Object,
      default: () => ({
        lat: 42.345573,
        lng: -71.098326,
      }),
    },
    pov: {
      type: Object,
      default: () => ({
        heading: 34,
        pitch: 10,
        zoom: 0,
      }),
    },
  },
  emits: ["pov", "position"],
  data() {
    return {
      map: null,
      streetView: null,
      fenway: { ...this.position },
      viewPov: this.pov,
      marker: null,
      showStreetView: false,
    };
  },
  watch: {
    position: {
      immediate: true,
      deep: true,
      handler(position) {
        if (JSON.stringify(this.fenway) !== JSON.stringify(position)) {
          this.fenway = { ...position };
          this.refreshMapPoint();
        }
      },
    },
    pov: {
      immediate: true,
      deep: true,
      handler(pov) {
        if (JSON.stringify(this.viewPov) !== JSON.stringify(pov)) {
          this.viewPov = { ...pov };
          this.refreshMapPoint();
        }
      },
    },
  },
  mounted() {
      googleApiloader(YOUR_GOOGLE_API_KEY)
      .load()
      .then(() => {
        this.initMap();
      })
      .catch(() => {
        console.warn("error loading google api");
      });
  },
  methods: {
    initMap() {
      if (!this.map) {
        this.map = googleMap.pureMap(this.$refs.map, {
          center: this.fenway,
          zoom: 13,
        });

        // streetView
        if (!this.streetView) {
          this.streetView = googleMap.streetViewPanorama(this.$refs.mapImage, {
            position: this.fenway,
            pov: {
              heading:
                this.viewPov && this.viewPov.heading
                  ? this.viewPov.heading
                  : 34,
              pitch:
                this.viewPov && this.viewPov.pitch ? this.viewPov.pitch : 10,
            },
            zoom: this.viewPov && this.viewPov.zoom ? this.viewPov.zoom : 0,
            scrollwheel: false,
          });

          // add pov_change event listner
          this.streetView.addListener(
            "pov_changed",
            (this.viewPov.heading = this.streetView.getPov().heading),
            (this.viewPov.pitch = this.streetView.getPov().pitch),
            (this.viewPov.zoom = this.streetView.getPov().zoom),
            this.handlePovChange()
          );
          // this.streetView.addListener("position_changed", () => {
          //   const position = {
          //     lat: this.streetView.getPosition().lat(),
          //     lng: this.streetView.getPosition().lng(),
          //   };
          //   this.fenway = position;
          //   console.log('init')
          //   this.handlePositionChange();
          // });

          // link to map
          this.map.setStreetView(this.streetView);
        }

        // init marker
        this.initMarker();
      }
    },
    initMarker() {
      if (!this.marker && this.map) {
        const { lat, lng } = this.fenway;
        this.marker = googleMap.newMarker({
          position: googleMap.latLng(lat, lng),
          // draggable: true,
          visible: true,
        });
        this.marker.setMap(this.map);
      }
    },
    refreshMapPoint() {
      // TODO
      if (this.map) {
        const { lat, lng } = this.fenway;
        this.marker.setVisible(false);
        const panPoint = googleMap.latLng(lat, lng);

        // refresh map
        this.map.panTo(panPoint);

        // refresh marker
        this.marker.setPosition(this.fenway);
        this.marker.setVisible(true);

        // refresh street view
        // var panorama = map.getStreetView()

        // update position of StreetView
        this.streetView.setPosition(this.fenway);

        // update the point of view
        this.streetView.setPov({
          // ...this.viewPov,
          heading:
            this.viewPov && this.viewPov.heading ? this.viewPov.heading : 34,
          pitch: this.viewPov && this.viewPov.pitch ? this.viewPov.pitch : 10,
        });
        this.streetView.setZoom(
          this.viewPov && this.viewPov.zoom ? this.viewPov.zoom : 0
        );
      }
    },
    handlePovChange() {
      this.$emit("pov", { ...this.viewPov });
    },
    handlePositionChange() {
      this.$emit("position", { ...this.fenway });
    },
  },
};
</script>

<template>
  <div class="row">
    <div class="col-12">
      <div :style="{ backgroundColor: '#E5E3DF' }">
        Loading ...
        <!-- map -->
        <div :style="{ visibility: showStreetView ? 'hidden' : 'unset' }">
          <div ref="map" class="map-wrapper"></div>
        </div>

        <!-- street view -->
        <div
          :style="{ visibility: !showStreetView ? 'hidden' : 'unset' }"
          class="street-view-container"
        >
          <div ref="mapImage" class="map-wrapper">
                Loading ...
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="col-6"></div> -->
  </div>
</template>

<style lang="scss" scoped>
.map-wrapper {
  height: 390px;
  border-radius: 5px;
  overflow: hidden;
}
.street-view-container {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 3;
  width: 100%;
  height: 100%;
  padding: 0 10px;
}

.ant-switch {
  height: 22px;
}
</style>

Thanks!