The class 'GeoJSON' is mistakenly extending the base class 'FeatureGroup'

Encountering an error message in one of my projects:

test/node_modules/@types/leaflet/index.d.ts(856,11): error TS2415: Class 'GeoJSON' incorrectly extends base class 'FeatureGroup'.
  Types of property 'setStyle' are incompatible.
    Type '(style: StyleFunction) => this' is not assignable to type '(style: PathOptions) => this'.
      Types of parameters 'style' and 'style' are incompatible.
        Type 'PathOptions' is not assignable to type 'StyleFunction'.
          Type 'PathOptions' provides no match for the signature '(feature?: Feature<GeometryObject>): PathOptions'.

The input files are as follows:

test.ts

import { LatLngExpression } from 'leaflet'

package.json

{
  "name": "test",
  "version": "0.0.1",
  "description": "",
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/leaflet": "^1.0.68",
    "gulp": "^3.9.1",
    "gulp-typescript": "^3.2.2",
    "typescript": "^2.4.2"
  }
}

tsconfig.json

{
  "compileOnSave": true,
  "compilerOptions": {
    "noEmitOnError": true,
    "target": "es5",
    "module": "amd",
    "moduleResolution": "node"
  },
  "include": [
    "test.ts"
  ]
}

gulpfile.js

const gulp = require('gulp');
const ts = require("gulp-typescript");

const tsProject = ts.createProject("tsconfig.json");

gulp.task('default', () => {
    const tsResult = tsProject.src().pipe(tsProject());
    return tsResult.js.pipe(gulp.dest(''));
});

The error occurs when running "yarn && gulp" but not with "npm install" or "tsc -p .". The issue only surfaced after upgrading to Typescript 2.4.2 from 2.4.1.

I am unsure which component is at fault: yarn, typescript, gulp-typescript, or @types/leaflet. Any suggestions on how to address this?

This test case is extracted from a larger project where I prefer using "yarn && gulp", so seeking a fix rather than workarounds.

Answer №1

It appears that the issue has miraculously resolved itself. It's possible there was a discrepancy between npm and yarn repositories.

The exact cause is uncertain and likely unimportant. This discussion may be brought to a close or removed altogether.

Answer №2

When I upgraded Typescript from version 2.4 to 2.5, I encountered a similar issue. Fortunately, updating the @types/leaflet module resolved the problem for me.

npm update @types/leaflet 

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Enhance user information by adding necessary fields

I often encounter situations where I need to select a specific entry from a set of data in a component, whether through a select box or as part of a table. However, the way I intend to utilize this data typically requires additional fields like the "label ...

Problems related to TypeScript in a callback session

I am currently working on enhancing the API response by adding the unique identifier (id) property during the login process. I followed the recommendation to use callbacks from a discussion on Stack Overflow (Get User ID from session in next-auth client), ...

Is it possible to use conditional logic on child elements in formkit?

I am a bit confused about how this process functions. Currently, I am utilizing schema to create an address auto complete configuration. My goal is to have the option to display or hide the fields for manual input. This is the current appearance of the ...

Invalid Redux store: Element type is not valid; a string type is expected

I am running into an issue while setting up the redux store with typescript for the first time. The error message I am encountering is: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) ...

Is there a way to enable autofill functionality if an email already exists in the database or API within Angular 12?

In order to auto-fill all required input fields if the email already exists in the database, I am looking for a way to implement this feature using API in Angular. Any guidance or suggestions on how to achieve this would be greatly appreciated. ...

Ways to assign unpredictable values (such as ids, dates, or random numbers) to a Domain Entity or Aggregate Root when it has been injected as dependencies

I am currently developing a frontend repository that follows an innovative hexagonal architecture approach with domain-driven design principles, and it utilizes Redux Toolkit. The development process involves Test-Driven Development (TDD) where I employ c ...

NPM rimraf - proceed with the execution even if directories are not found (do not halt with exit code 1)

My npm script is set up to run a series of synchronous commands, starting with npm run clean:install". Here is the sequence: "install:all": "npm install && bower install", "clean": "npm run rimraf -- node_modules doc typings coverage wwwroot bow ...

The binary git was nowhere to be found

Hello, I am just starting out with react-native development and recently made a change in my package.json file by updating "rn-nodeify" to version 10.3.0 under devDependencies. However, when I ran npm install, I encountered an issue while working on my pro ...

How do you properly include a new property in an Object using Typescript?

I am currently delving into the world of typescript. After exploring various sources like this one and that one, as well as trying out multiple solutions, I have encountered a challenge. I have a variable named incomingArticleObject which needs to be of ty ...

Encountering an error with the Angular 2 SimpleChanges Object during the initial npm start process

Within my Angular 2 application, there exists a component that holds an array of objects and passes the selected object to its immediate child component for displaying more detailed data. Utilizing the "SimpleChanges" functionality in the child component a ...

Encountering a problem when attempting to launch a project using Npm start, particularly when the project was generated using create-react

I am currently using Ubuntu 16 OS and have successfully installed Node version v10.13.0 and npm version 6.4.1. I am working on a Reactjs project created with create-react-app. The project was created using the command: sudo npm init react-app my-app ...

Tips for resolving the error of encountering a forbidden and unexpected token in JSON at position 0 while using React hooks

const [forecastData, setForecastData] = useState({ forecast: []}); useEffect(() => { let ignore = false; const FETCHDATA = async () => { await fetch(forecast,{ headers : { ...

Generating a fresh array based on the size of its existing elements is the key feature of the ForEach method

When running this forEach loop in the console, it extracts the property "monto_gasto" from an array of objects in the firebase database. Here's how it looks: something.subscribe(res => { this.ingresos = res; ...

The onChange event for React input does not trigger when the value remains the same

Script: function SingleInput(props: {value: string; onChanged: (value: string) => void}) { const handleChange = useCallback( (e: React.ChangeEvent<HTMLInputElement>) => { const newValue = e.target.value; cons ...

TS-2304 Error - 'Iterable' not found in TypeScript when trying to import 'jquery' into a '.ts' file

Currently, I am utilizing TypeScript version 2.4 in Visual Studio Code for development. My approach involved installing jQuery via NPM using the given command: npm install --save @types/jquery Subsequently, I obtained the source code for the jquery modul ...

What is the best method for exporting a MapboxGL map?

I am currently utilizing mapboxGL to display maps on a website, and I am interested in exporting the map as an image with the GeoJSON data that has been plotted. I attempted to use the leaflet plugin for this purpose, but it was unable to render clusters ...

Navigating through unorganized items in Angular 9

Exploring Object Structures As I navigate through a complex object, I aim to extract all values within the ngbtypeahead. However, the challenge lies in the fact that the keys within this object are distinct, hindering my ability to retrieve these values ...

What methods can I employ to trace anonymous functions within the Angular framework?

I'm curious about how to keep track of anonymous functions for performance purposes. Is there a way to determine which piece of code an anonymous function is associated with? Here's an example of my code: <button (click)="startTimeout()&q ...

The specified data type is not compatible with the current context and cannot be treated as an array

Just starting out with TypeScript and I've encountered an issue that's preventing me from successfully building my app. Everything runs smoothly on my local environment, but as soon as I try to build it, an error pops up. Here's a snippet o ...

How to extract the chosen option from a bound list within an Angular application

Our goal is to avoid using 2-way binding in our component setup: <select type="text" formControlName="region" (change)="regionChanged($event)"> <option *ngFor="let region of regionsDDL" [ngValue]="region">{{region.name}}</option> ...