TypeScript - [Subsequent property declarations must have the same type] - Multiple references to the same type definitions

Question

I'm rather new to using TypeScript and Webpack and unfortunately keep running into an issue with my type declarations that I just cant seem to resolve.

To put it simply my project is a ASP.NET MVC React application which uses NPM, TypeScript and Webpack to manage JavaScript dependencies. The problem I am running into is that while my project can successfully compile I have over 180 errors that look like this.

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>'.

Here is a picture of the error console:

Now if I take a closer look by clicking on the type and pressing 'Go to definition' I can see that clearly my project has two references defined for the same type as visible here:

The problem is that both of these files appear to be requirements for my project tsconfig.json file because without them it doesn't compile.

My tsconfig.json looks like this:

{
  "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 my package.json file looks like this:

{
  "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"
  }
}

Now I suspect that this problem has something to do with the line in my tsconfig.json file "lib": [ "es5", "es2017", "dom"] but if I remove any of those references my project will not compile because clearly some of my types are defined in those library references.

Can anyone please help guide me into the right direction on how to resolve this issue and correctly reference the DOM along with React in ASP.NET TypeScript?

EDIT: I have also tried changing my tsconfig.json file to remove the 'lib' references (on the assumption that I can use a Polyfill) to "lib": []. Yet the problem still persists.

Piscatelli

What are the full paths to the global.d.ts files you found in the "Go to definition"? Assuming these are from the React typings, it looks like you may have two incompatible copies of the React typings installed. – Subinfeudate

Hi Matt, Thanks for the response. The complete path is C:\blah\blah\myproject\node_modules\@types\react and C:\Users\Max\AppData\Local\Microsoft\TypeScript\3.0\node_modules\@types\react . Now I can see that the issue appears to be that my node_modules folder is downloading react types. If I remove the folder from node_modules and restart it does seem to resolve but the problem is that I don't see anywhere where I have added the reference for react typings. – Piscatelli

Answer 1

Providing "skipLibCheck": true to tsconfig.json compilerOptions solved problem in my case

Patrolman

While this does hide the error, it doesn't actually fix it. It just turns off Typescript for all type declaration files. Not a problem for everyone, but if you have .d.ts files in your source code they won't be checked anymore, which can cause bigger problems later. – Schiro

Answer 2

This error occurs when you have a dependency and a sub-module with the same dependency in a different version. The right way to fix this is including a "resolutions" section in your package.json. The following example explain how to you "resolutions": 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"
  }
}

Documentation reference: https://classic.yarnpkg.com/en/docs/selective-version-resolutions/

Constanceconstancia

Answer 3

I found the following github issue, which I am pretty certain identifies the root cause of the problems you were facing: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/25145

So you'll get @types/react at version 16.3.9 and @types/react-dom at version 16.0.5, because you explicitly asked for those. However, @types/react-dom lists a dependency on @types/react as the following: "@types/react": "*"

[this] interprets as "the latest version of @types/react", so it installs an additional version of the package.

So you will have versions v16.3.9 and v16.3.12 of the types package simultaneously being used, which causes the error.

There's two ways I know of to fix this:

1. Update to the latest version of the @types/react package in your package.json
2. Add a resolutions section to your package.json to tell Yarn to resolve the dependency differently.

Humfrey

Answer 4

Because of the feedback above I believe I have found a solution to my problem.

1. Run 'npm uninstall react -g' to uninstall the react package from your global cache.

2. Create a manual reference in your package.json file to the @types/react package.

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

My final package.json file looked like this:

{
  "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"
  }
}

and tsconfig.json like this:

{
  "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 seems to have resolved the errors.

Piscatelli

If someone wants to provide a more detailed answer would appreciate clarification on why I was getting a @types/react package reference in my node_modules folder even though it wasn't declared in package.json. I'm using Visual Studio 2017 and wondering if this is somehow the IDE doing something unexpected rather than npm. – Piscatelli

try yarn why @types/react :) – Recompense

Answer 5

In your project, different packages installed different versions of @types/react. In your package.json, you can specify a specific version for those types to resolve to, e.g.

// 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"
  }
}

Ivey