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.

Answer 1

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/

Answer 2

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.

Answer 3

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.

Answer 4

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