Subsequent declarations in TypeScript must share the same type - Ensuring consistency in multiple references to type definitions

I've recently started working with TypeScript and Webpack, but I'm encountering a persistent issue with my type declarations that I can't seem to resolve.

Simply put, my project is an ASP.NET MVC React application that utilizes NPM, TypeScript, and Webpack for managing JavaScript dependencies. Despite being able to successfully compile the project, I have more than 180 errors of this nature:

TS2717    (TS) Subsequent property declarations must have the same type. 
Property 'webview' must be of type
'DetailedHTMLProps<WebViewHTMLAttributes<HTMLWebViewElement>,
HTMLWebViewElement>', but here has type
'DetailedHTMLProps<WebViewHTMLAttributes<HTMLWebViewElement>,
HTMLWebViewElement>'.

You can view the error console in the following image: https://i.sstatic.net/K4QJQ.png

Diving deeper by clicking on the type and selecting 'Go to definition,' it's evident that my project has two conflicting references defined for the same type as shown here:

https://i.sstatic.net/57rAO.png

Both files mentioned appear to be necessary for my tsconfig.json file, as the project won't compile without them.

This is how my tsconfig.json is configured:

{
  "compilerOptions": {    
    "module": "commonjs",    
    "moduleResolution": "node",
    "target": "es5",
    "sourceMap": true,
    "lib": [ "es5", "es2017", "dom"]
    "removeComments": true,
    "typeRoots": [
      "/node_modules/@types",
      "/Types/"
    ]

  },
  "compileOnSave": false,
  "exclude": [
    "/node_modules/",
    "/bin",
    "/obj"
  ]
}

And this is the content of my package.json file:

{
  "name": "fungalai",
  "version": "1.0.0",
  "dependencies": {
    "react": "16.4.2",
    "react-dom": "16.4.2"
  },
  "devDependencies": {
    "@types/flux": "3.1.7",
    "axios": "^0.18.0",
    "deep-diff": "^1.0.1",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-polyfill": "^6.26.0",
    "babel-preset-es2015": "6.24.1",
    "babel-preset-react": "6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "create-react-class": "^15.6.3",
    "expose-loader": "^0.7.5",
    "jszip": "^3.1.5",
    "flux": "3.1.3",
    "ts-loader": "^4.3.0",
    "typescript": "3.0.1",
    "uglifyjs-webpack-plugin": "^1.2.5",
    "webpack": "^4.8.3",
    "webpack-cli": "^2.1.4"
  }
}

The problem seems to be related to the line in my tsconfig.json file "lib": [ "es5", "es2017", "dom"]. Removing any of these references prevents the project from compiling since some types are defined within those libraries.

I would appreciate guidance on resolving this issue and correctly referencing DOM and React in an ASP.NET TypeScript environment.

EDIT: I also attempted removing the 'lib' references in my tsconfig.json file (assuming I could use a Polyfill) with "lib": []. However, the problem persisted.

asp.netasp.net-mvctypescriptwebpackdefinitelytyped

Answer №1

Including "skipLibCheck": true in the tsconfig.json compilerOptions fixed the issue I was facing

Answer №2

If you encounter an error stemming from conflicting dependencies in your project, specifically when a sub-module and main project share the same dependency but in different versions, there is a solution. You can resolve this issue by adding a "resolutions" section within your package.json. To illustrate how to utilize "resolutions," consider the following example: package.json

{
  "name": "project",
  "version": "1.0.0",
  "dependencies": {
    "left-pad": "1.0.0",
    "c": "file:../c-1",
    "d2": "file:../d2-1"
  },
  "resolutions": {
    "d2/left-pad": "1.1.1",
    "c/**/left-pad": "^1.1.2"
  }
}

For more information, refer to the documentation at:

Answer №3

I came across an insightful GitHub issue that seems to pinpoint the source of the issues you've been experiencing: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/25145

It appears that by explicitly requesting @types/react version 16.3.9 and @types/react-dom version 16.0.5, a package conflict arises due to the dependency listing in @types/react-dom requiring "@types/react": "*".

This notation translates to "the latest version of @types/react," resulting in the installation of an additional package version.

Consequently, versions v16.3.9 and v16.3.12 of the types package may both be utilized simultaneously, leading to errors.

To resolve this issue, there are two methods that I am aware of:

  1. Upgrade to the most recent @types/react version in your package.json file
  2. Include a resolutions section in your package.json to instruct Yarn on how to handle the dependency resolution differently.

Answer №4

Thanks to the helpful feedback received, I am confident that I have successfully tackled my issue.

  1. To eliminate the react package from your global cache, execute 'npm uninstall react -g'.

  2. Incorporate a manual reference in your package.json file for the @types/react package.

    "devDependencies": { "@types/react": "16.4.13" }

The final version of my package.json appeared as follows:

{
  "name": "fungalai",
  "version": "1.0.0",
  "dependencies": {
    "react": "16.4.2",
    "react-dom": "16.4.2"
  },
  "devDependencies": {
    "@types/flux": "3.1.7",
    "@types/react": "16.4.13",
    "axios": "^0.18.0",
    "deep-diff": "^1.0.1",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-polyfill": "^6.26.0",
    "babel-preset-es2015": "6.24.1",
    "babel-preset-react": "6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "create-react-class": "^15.6.3",
    "expose-loader": "^0.7.5",
    "jszip": "^3.1.5",
    "flux": "3.1.3",
    "ts-loader": "^4.3.0",
    "typescript": "3.0.1",
    "uglifyjs-webpack-plugin": "^1.2.5",
    "webpack": "^4.8.3",
    "webpack-cli": "^2.1.4"
  }
}

As for tsconfig.json, it took this shape:

{
  "compilerOptions": {
    "module": "commonjs",
    "moduleResolution": "node",
    "target": "es5",
    "sourceMap": true,
    "jsx": "react",
    "lib": [ "es6", "dom" ], 
    "removeComments": true,
    "typeRoots": [
      "/node_modules/@types",
      "/Types/"
    ]
  },
  "compileOnSave": false,
  "exclude": [
    "/node_modules/",
    "/bin",
    "/obj"
  ]
}

This method appears to have effectively addressed the issues at hand.

Answer №5

If you encounter a situation where different packages in your project have installed different versions of @types/react, you can control which version to use by specifying it in your package.json. For example:

// package.json
{
  // ...
  "dependencies": {
    "react": "16.14.0",
    "react-dom": "16.14.0",
    // ...
  },
  "devDependencies": {
    "@types/react": "^16.14.0",
    "@types/react-dom": "^16.14.0",
    // ...
  },
  "resolutions": {
    "@types/react": "^16.14.0"
  }
}

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

"Transferring a C# dictionary into a TypeScript Map: A step-by-step

What is the correct way to pass a C# dictionary into a TypeScript Map? [HttpGet("reportsUsage")] public IActionResult GetReportsUsage() { //var reportsUsage = _statService.GetReportsUsage(); IDictionary<int, int> te ...

javascriptangulartypescriptasp.net-coreasp.net-web-api

When you click on one checkbox, the angular2-multiselect dropdown automatically selects all the boxes

<angular2-multiselect [data]="sortedDataList | OrderBy : 'clientName'" [(ngModel)]="selectedItem[sortedDataList.clientId]" [settings]="dropdownSettings" name="multiSelect" (onSelect)="onItemSelect($event, ...

javascriptangulartypescriptmulti-select

Interactive Data Display in an ASP.NET Platform

I've been struggling to find a way to dynamically display data, specifically related to an alert system stored in a SQL Server DB table. My goal is to generate a string for each relevant row in the table to be shown on an ASP page, along with a checkB ...

c#asp.netpresentation

Receiving ERR_CONNECTION_RESET error only when making .NET Core Web API calls through IIS, while all other calls

I'm facing a puzzling situation... Currently, I have a .NET Core web application that functions perfectly when running locally. It includes several WebAPI endpoints, all functioning as expected with GET requests and returning JSON data accurately. H ...

c#asp.netiisasp.net-web-apiasp.net-core

Tips for showcasing unique keywords in Ace Editor within the Angular framework

Can anyone help me with highlighting specific keywords in Angular using ace-builds? I've tried but can't seem to get it right. Here's the code snippet from my component: Check out the code on Stackblitz import { AfterViewInit, Component, ...

javascriptangulartypescriptace-editor

Mastering the Use of *ngIf with *ngFor: Best Practices for Proper Implementation

Can someone help me rewrite the combination of *ngIF and *ngFor below? I understand that my issue may be similar to others, but please know that this is different. Everything seems to be working fine. The only problem I'm facing is that the color of ...

angulartypescript

Assigning values based on conditions for unions of types

I'm currently exploring typescript and facing a challenge with dynamically assigning values to a union type: type Labs = (name === 'dakota') ? 'fruit' | 'veg' : 'plow' | 'field' | 'till'; An ...

typescript

:after pseudo class not functioning properly when included in stylesheet and imported into React

I am currently utilizing style-loader and css-loader for importing stylesheets in a react project: require('../css/gallery/style.css'); Everything in the stylesheet is working smoothly, except for one specific rule: .grid::after { content: ...

javascriptcssreactjswebpack

Navigating through an array in Angular 5: a guide

This question may seem simple, but I'm having trouble figuring it out. Here is the code snippet I am working with: getInstabul(): void { this.homeService.getWeather() .subscribe((weather) => { this.instanbulWeathers = weather ...

typescript

Angular 2 Animations are currently malfunctioning

After following the Angular 2 Documentation for Animations (link to https://angular.io/docs/ts/latest/guide/animations.html), I successfully migrated my project to Angular 4.0.1. Below is a snippet from my package.json: "@angular/common": "~4.0.1", "@angu ...

angularanimationtypescriptcomponentstemplating

Is it necessary for consumers to import global augmentations as a side effect?

I created a package named core.error which consists of two files: global.d.ts export {}; declare global { export interface Error { foo(): void; } } index.ts Error.prototype.foo = function (this: Error): void { }; export const dooFoo = (err:Er ...

javascriptnode.jstypescriptmonkeypatching

An issue arises when attempting to make a POST request to the Handler via AJAX, whereas GET requests

Let me explain my issue: I have implemented an Ajax call to a Handler. Surprisingly, everything works fine when I use the GET method, but when I switch to POST, I encounter a Network Error 404 Not found. How can this be happening? var jsondata = { zip: ...

jqueryasp.netajaxvb.nethandler

Discover the process of dynamically importing JavaScript libraries, modules, and non-component elements within a Next.js

Lately, I have been utilizing Next.js and mastering its dynamic import feature for importing components with named exports. However, I recently encountered a particular npm package that functions only on the client-side (requires window) and has a substant ...

javascriptnode.jsreactjstypescriptnext.js

What is the best way to ensure that the operations are not completed until they finish their work using RX

Is there a way to make RXJS wait until it finishes its work? Here is the function I am using: getLastOrderBeta() { return this.db.list(`Ring/${localStorage.getItem('localstorage')}`, { query: { equalTo: fa ...

javascripttypescriptionic2angularfire

The HTTP POST request is showing an unauthorized 401 error

After successfully retrieving a JSON object using the same method on Google Chrome Postman following login, I encountered an issue when attempting to retrieve the same JSON result in my C# codebehind - specifically, an Unauthorized 401 exception. The code ...

c#asp.netjsonpost

jQuery reloads the page without refreshing the content

Currently, I am utilizing jQuery to send a form to a handler script via AJAX. After completion, the page is supposed to refresh automatically, but the content does not actually update unless the user does a Shift-F5 refresh on the browser. This can be conf ...

jqueryasp.netwebformsreload

Unauthorized access in Asp.Net Core using C#

I seem to be having trouble with my title. However, I am facing a simple issue. My login functionality is not working properly. Could it be because I am unable to decrypt the encrypted data? In essence, I have a register method in place. This is my Auth ...

c#asp.netasp.net-web-apiasp.net-corepassword-encryption

What reasons could be preventing my Class Library from being referenced?

My class library file doesn't seem to be recognized when I add it to the reference and bin folder. using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Data; namespace SecuritySettings { public clas ...

c#.netasp.netclass

Using lambda expressions to sort through an array of objects in React

My goal is to create a delete button that removes items from a list and updates the state variable accordingly. public OnDeleteClick = (): void => { const selectionCount = this._selection.getSelectedCount(); let newArray = this.state.items; for ...

javascriptreactjstypescript

Transform HTML iteration results into a WebGrid format using ASP.NET MVC

Using two loop conditions, I have filled the HTML table displayed below and now I want to achieve the same result with Webgrid. <table class="awe-ajaxlist table_dashboard"> <tr class="tbl_header"> < ...

c#sqlasp.netentity-frameworkasp.net-mvc-4