Definitelytyped: react is at 16.3.1 and react-dom at 16.0.4

[awjreynolds]

This is creating a typescript compile error due to incompatibility between react and react-dom d.ts versions.

Subsequent property declarations must have the same type. Property 'a' must be of type 'DetailedHTMLProps<AnchorHTMLAttributes, HTMLAnchorElement>', but here has type 'DetailedHTMLProps<AnchorHTMLAttributes, HTMLAnchorElement>

I've overcome the issue for now by placing this in my package.json

    "@types/react": "^16.0.40",
    "@types/react-dom": "^16.0.4",

[nlaffey]

The suggested package.json by awjreynolds wasn't working for me but this is:

    "@types/react": "16.3.4",
    "@types/react-dom": "16.0.4",

[Swatinem]

I have the same problem due to react-router.

node_modules/@types/react-router/node_modules/@types/react/index.d.ts(3935,13): error TS2717: Subsequent property declarations must have the same type.  Property 'view' must be of type 'SVGProps<SVGViewElement>', but here has type 'SVGProps<SVGViewElement>'.
node_modules/@types/react/index.d.ts(2221,19): error TS2320: Interface 'Element' cannot simultaneously extend types 'ReactElement<any>' and 'ReactElement<any>'.
  Named property 'type' of types 'ReactElement<any>' and 'ReactElement<any>' are not identical.

Well at least yarn tells me that both react-router, react-router-dom and react-dom depend on @types/[email protected]

So pinning the version to 16.1 fixed this problem for me. But hey, maybe its a yarn problem -_-

[Swatinem]

Ok, I found out it was a yarn problem.
Somehow it does not correctly dedupe the dependencies.
Try deleting your yarn.lock and let it create a fresh one, then it worked for me with the most recent @types/react version.

[empz]

Deleting yarn.lock (and even the whole node_modules folder) did not remove the errors for me.

dependencies

{
    "react": "^16.3.1",
    "react-dom": "^16.3.1",
    "react-router-dom": "^4.2.2",
    "@types/react": "^16.3.5",
    "@types/react-dom": "^16.0.4",
    "@types/react-router": "^4.0.23",
    "@types/react-router-dom": "^4.2.6"
}

[jtbennett]

@types/react-dom also exports react types, but has not been updated to correspond with @types/react 16.3. So you get a conflict between the types exported from the two modules.

_Workaround:_ You can use react 16.3 now by temporarily removing @types/react and including only @types/react-dom. The downside is that if you want to use new features in 16.3 -- like createRef() and context apis, you need to sprinkle as any on them, because the type definitions in @types/react-dom 16.0 don't have those apis yet.

Of course, the real solution is for @types/react-dom to be updated to match @types/react 16.3.

[nojaf]

I'm missing createRef by this mismatch.
Workaround add:

declare module "react" {
  export function createRef();
}

[Swatinem]

To clarify the problem with yarn, which I think is actually a bug:
Consider this snippet of a working node_modules hierarchy:

├─ @types/[email protected]
│  ├─ @types/node@*
│  └─ @types/react@*
├─ @types/[email protected]
│  ├─ @types/history@*
│  ├─ @types/react-router@*
│  └─ @types/react@*
├─ @types/[email protected]
│  ├─ @types/history@*
│  └─ @types/react@*
├─ @types/[email protected]
│  └─ csstype@^2.2.0

Here, all the other packages, such as @types/react-dom depend on @types/react@*, which in this case works out fine because I am pinning the exact latest version of @types/[email protected].

An hour ago when I was playing around with this, I still had @types/[email protected] pinned exactly. Using that, yarn was not smart enough to dedupe all of those dependencies, and actually pulled in @types/[email protected] as child of all those packages that depend on @types/react@*.

So I think this really is a bug in yarn, will have to search their issues or file a new one :-)

[Swatinem]

Ok, this seems to basically be https://github.com/yarnpkg/yarn/issues/4489

[kamranayub]

@jtbennett Do all we need to do is rev the types for react-dom and it'll pull the latest React definitions? It was last updated in March.

[kamranayub]

Alright, here's a way to fix this pretty nicely for now.

In your package.json add:

  "resolutions": {
    "@types/react": "16.3.11"
  },

As documented by Yarn here this will override sub-dependency versions to resolve to your targeted version. You can use a glob pattern too.

For me, I did this, then updated to the latest @types/react-router-dom and it used the new @types/react version 👍 If you're on latest, Yarn might want you to re-install the same package so it resolves via the new resolution.