Error: GeocoderResult[] (Ionic 5 & Vue 3)

[Chiqo Rifky Saputra]

Hi, first of all. This is my first experience for using this cordova plugin (i am using capacitor v3).

Argument of type '(results: GeocoderResult[]) => null | undefined' is not assignable to parameter of type '(value: GeocoderResult[] | BaseArrayClass<GeocoderResult[]>) => PromiseLike<null | undefined> | null | undefined'.
  Types of parameters 'results' and 'value' are incompatible.
    Type 'GeocoderResult[] | BaseArrayClass<GeocoderResult[]>' is not assignable to type 'GeocoderResult[]'.
      Type 'BaseArrayClass<GeocoderResult[]>' is missing the following properties from type 'GeocoderResult[]': length, concat, join, shift, and 20 more.
    159 |           "lng": coordinates.value.coords.longitude

This error came up, when i decided to use this plugin with Ionic 5 & Vue 3. I have this error, that i couldn't find out the solution.

Here's my package.json (Open this up)

"dependencies": {
    "@capacitor/android": "3.3.2",
    "@capacitor/app": "^1.0.6",
    "@capacitor/core": "^3.3.2",
    "@capacitor/dialog": "^1.0.2",
    "@capacitor/geolocation": "^1.2.0",
    "@capacitor/haptics": "^1.1.3",
    "@capacitor/keyboard": "^1.1.3",
    "@capacitor/local-notifications": "^1.0.9",
    "@capacitor/status-bar": "^1.0.6",
    "@ionic-native/core": "^5.22.0-beta-1",
    "@ionic-native/google-maps": "^5.27.0-beta-20200630",
    "@ionic-native/native-geocoder": "^5.36.0",
    "@ionic/vue": "~5.6.13",
    "@ionic/vue-router": "~5.6.13",
    "cordova-plugin-googlemaps": "^2.7.1",
    "cordova-plugin-nativegeocoder": "^3.4.1",
    "core-js": "^3.8.3",
    "vue": "^3.2.6",
    "vue-router": "^4.0.11"
  },
  "devDependencies": {
    "@capacitor-community/sqlite": "^3.0.0-rc.2",
    "@capacitor/cli": "^3.2.5",
    "@ionic/app-scripts": "^3.2.4",
    "@types/jest": "^24.0.19",
    "@typescript-eslint/eslint-plugin": "^4.15.1",
    "@typescript-eslint/parser": "^4.15.1",
    "@vue/cli-plugin-babel": "~4.5.13",
    "@vue/cli-plugin-e2e-cypress": "~4.5.13",
    "@vue/cli-plugin-eslint": "~4.5.13",
    "@vue/cli-plugin-router": "~4.5.13",
    "@vue/cli-plugin-typescript": "~4.5.13",
    "@vue/cli-plugin-unit-jest": "~4.5.13",
    "@vue/cli-service": "~4.5.13",
    "@vue/compiler-sfc": "^3.0.4",
    "@vue/eslint-config-typescript": "^7.0.0",
    "@vue/test-utils": "^2.0.0-0",
    "copy-webpack-plugin": "^5.1.2",
    "eslint": "~6.8.0",
    "eslint-plugin-vue": "^7.0.0-0",
    "jeep-sqlite": "^1.3.2",
    "typescript": "~4.1.5",
    "vue-jest": "^5.0.0-0",
    "vue-sqlite-hook": "^2.1.4"
  }

Here's my Vue component (Open this up)

<script lang="ts">
import {
  GoogleMaps,
  GoogleMap,
  GoogleMapsEvent,
  GoogleMapOptions,
  Geocoder,
  GeocoderResult,
  Marker
} from '@ionic-native/google-maps';
import { defineComponent, ref } from "vue";

export default defineComponent({
.....
setup() {
    // form values
    const origin = ref<string>("");
    const destination = ref<string>("");
    const coordinates = ref<any>({});
    const googleMap = ref<GoogleMap>();

    const loadMap = () => {
    Geocoder.geocode({
        "position": {
          "lat": coordinates.value.coords.latitude,
          "lng": coordinates.value.coords.longitude
        }
      }).then((results: GeocoderResult[]) => {
        if (results.length == 0) {
          // Not found
          return null;
        }
        let address: any = [
          results[0].subThoroughfare || "",
          results[0].thoroughfare || "",
          results[0].locality || "",
          results[0].adminArea || "",
          results[0].postalCode || "",
          results[0].country || ""].join(", ");
      });
    };

    return {
      ....
      // Data
      origin,
      destination,
      ...

      // Methods
      ....
      loadMap,
    };
  }
});
</script>

Sorry, i can't show you the full code, because. it's too long and it's not what i want to ask. But the issue what i am talking is about the error above this code. I could really use some help.