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

Why does WebStorm fail to recognize bigint type when using TSC 3.4.x?

Currently, I am working on the models section of my application and considering switching from using number to bigint for id types. However, despite knowing that this is supported from TSC 3.2.x, WebStorm is indicating an error with Unresolved type bigint. ...

In React-Native, implement a function that updates one state based on changes in another state

I need to trigger a function when a specific state changes. However, I encountered the error 'maximum update depth reached'. This seems illogical as the function should only respond to changes from stateA to update stateB. I attempted using setSt ...

I am having difficulty accessing the values stored in my cardTiles variable

I am facing an issue with a variable called cardTiles in my Angular 9 component. The variable is defined as cardTitles:Product[] = []; The Product class is defined as follows export class Product{ productName: string;} When I console.log(this.cardTi ...

How can you inform TypeScript about a file that will be included using a script tag?

I am currently utilizing TypeScript for my front-end JavaScript development, and I have a situation where I am loading two scripts from my index.html file as shown below: <script src="replacements.js"></script> <script src="socket.js">&l ...

Error Occurs in Vue Cli: Module '../package.json' not Found After Installation using npm

While I may not be an expert in Vuejs or Vuecli, I somehow manage to make things work. Recently, when revisiting a project I had previously worked on using Vuecli3 and webpack, I encountered the following error in development mode: $ vue-cli-service ser ...

An error persists in PhpStorm inspection regarding the absence of AppComponent declaration in an Angular module

After creating a new Angular application, I am encountering the issue of getting the error message "X is not declared in any Angular module" on every component, including the automatically generated AppComponent. Despite having the latest version of the An ...

What is the best way to retrieve data from MySQL for the current month using JavaScript?

I need to retrieve only the records from the current month within a table. Here is the code snippet: let startDate = req.body.startDate let endDate = req.body.endDate let result = await caseRegistration.findByDate({ p ...

Struggling with sluggish performance on a certain project within VS Code

My experience with VS code has been excellent over the years, but I recently encountered a problem in one of my projects that caused a significant slowdown in performance. Strangely, other projects are working fine without any issues on VS code. I suspect ...

When attempting to run the yarn build dist command, an error of type TypeError is encountered, stating that it is not possible to set the constructor property

Upon executing the following command in a GitHub workflow, I encountered this error: npm-run-all -p types transpile @internal_package: $ swc src --out-dir dist @internal_package: /home/runner/work/repo-name/repo-name/node_modules/ttypescript/lib/loadTypesc ...

When should I schedule the execution of the .spec and .po.ts files in Protractor?

Curious about TypeScript and Protractor: I have a couple of basic helper functions stored in a shared.po.ts file within my Protractor suite. These functions are triggered by the third it() in my .spec file - meaning they are not immediately called upon ru ...

Necessitating derived classes to implement methods without making them publicly accessible

I am currently working with the following interface: import * as Bluebird from "bluebird"; import { Article } from '../../Domain/Article/Article'; export interface ITextParsingService { parsedArticle : Article; getText(uri : string) : B ...

Using React, PIXI, and Zustand can sometimes lead to stale state issues when handling mouse events

I currently have a Pixi canvas that utilizes pointer handlers. Users are able to click on a point within a 'sequence' and move it. Recently, I came across an issue with the mouse handlers having stale state. To resolve this, I began recreating t ...

Connect an Observable to the template with async binding

I've been attempting to link an Observable to a template variable in Angular using the following code: [class.active]="isBookmarked$ | async" During the ngOnInit function, I initialize the Observable: var promise = this.cacheService.getItem(this.bo ...

Validating the version of the discord.js npm package within the embed command

I'm curious if there's a method to utilize npm to verify the version number of discord.js, similar to what node does with (process.version), for incorporation into a stats command. It may seem like a minor query, but I am interested in exploring ...

Encountering a ReferenceError stating that the window object is not defined while building a React Leaflet application

In my upcoming nextjs project, I've incorporated react-leaflet. It behaves flawlessly in dev mode. However, upon attempting to build the project, it throws a ReferenceError: window is not defined. Despite setting ssr to false in dynamic, the error per ...

Getting object arguments from an npm script in a NodeJS and TypeScript environment can be achieved by following these steps

I'm trying to pass an object through an NPM script, like this: "update-user-roles": "ts-node user-roles.ts {PAID_USER: true, VIP: true}" My function is able to pick up the object, but it seems to be adding extra commas which is ...

Error encountered: The build failed due to the presence of two distinct types sharing the same name, however, they

Encountering an error during the build of my JHipster Angular project [ERROR] Error at /Users/Dan/work/gba/node_modules/ng-jhipster/src/interceptor/interceptable-http.d.ts:4:22: Class 'InterceptableHttp' incorrectly extends base class 'Http ...

Mastering regular expressions in TypeScript

My goal is to perform linting on staged files that are either .ts or .tsx and located within the src folder. I am aware that for selecting all js files one can use "*.js": [--list of commands--] inside the lint staged property. I'm curious to learn m ...

Angular - Showcasing Nested Objects in JSON

I am experimenting with using angular ngFor to iterate through this data: Link: Although I can successfully retrieve the data by subscribing to it, I encounter an issue when trying to display attributes that contain objects. The output shows as [object O ...

Cheerio in node.js encounters a problem while reading HTML files

I am brand new to JavaScript and I've hit a roadblock with Node Cheerio. Any assistance would be greatly appreciated. The code I'm currently working on can be found here: https://github.com/zafartahirov/bitstarter. Once the issue is resolved, t ...