CODEWITHSUNDEEP
reactjstypescripttypesesriesri-leaflet
avenmia
avenmia

Reputation: 2615

How to fix: Property 'geocodeService' does not exist on type 'typeof import("node_modules/@types/esri-leaflet-geocoder/index")'

I'm having a typing issue with the Esri Leaflet Geocoder types package. https://www.npmjs.com/package/@types/esri-leaflet-geocoder

Here is how I'm importing it:

import * as L from 'leaflet';
import 'esri-leaflet';
import * as ELG from 'esri-leaflet-geocoder';

Here is how I'm trying to use it:

 const geocodeServiceResult = ELG.geocodeService({ apikey: apiToken });

      geocodeServiceResult
        .suggest()
        .text(value)
        .within([
          [boundaryBox.ymin, boundaryBox.xmin],
          [boundaryBox.ymax, boundaryBox.xmax],
        ])
        .run((err, response) => {
          if (err) {
            console.error(err);
            return;
          }
          console.log("Response suggestions are:", response)
          if(response.suggestions && response.suggestions.length > 0)
          {
            setSuggestions(
              response.suggestions.map((suggestion: AddressSuggestion) => ({
                text: suggestion.text
              }))
            );
          }
        });
    } else {
      setSuggestions([]);
    }

I get the following TypeScript error Property 'geocodeService' does not exist on type 'typeof import("MyPath/node_modules/@types/esri-leaflet-geocoder/index")'

My tsconfig is below:

{
  "compilerOptions": {
    "target": "es2017",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "noUncheckedIndexedAccess": true
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "**/*.cjs",
    "**/*.mjs",
    "**/*.js"
  ],
  "exclude": ["node_modules"]
}

I've tried the following for imports:

import * as L from 'leaflet';
import 'esri-leaflet';
import 'esri-leaflet-geocoder';

import * as ELG from 'esri-leaflet-geocoder';

import * as L from 'leaflet';
import 'esri-leaflet';
import 'esri-leaflet-geocoder';

...

L.esri.Geocoding.geocodeService (this throws a null exception trying to reference Geocoding)

Upvotes: 0

Views: 49

Answers (1)

illia_6655321
illia_6655321

Reputation: 386

I didn't work with this library, but here are some info that could be useful:

  1. Looks like this package has problems with TS - https://github.com/perliedman/leaflet-control-geocoder/issues/260. And some examples are in the tread.
  2. Try import like import L from 'leaflet';. And then use it L.esri.Geocoding.geocodeService. There are some references: https://medium.com/@limeira.felipe94/integrating-geocoder-with-react-leaflet-in-webgis-dee21220332e
  3. We always have the 'dirty' solution. Try (ELG as any).geocodeService

Upvotes: 0

Related Questions