reactjs - Duplicate identifier 'LibraryManagedAttributes'

Question

I have the same issue as in:

React typescript (2312,14): Duplicate identifier 'LibraryManagedAttributes'

and

TypeScript error: Duplicate identifier 'LibraryManagedAttributes'

But I just can't find any solution.

I already upgraded to the latest node/npm/yarn/typescript versions. Also tried downgrading. Nothing helps.

yarn build --verbose
yarn run v1.9.4
$ react-scripts-ts build --verbose
Creating an optimized production build...
Starting type checking and linting service...
Using 1 worker with 2048MB memory limit
ts-loader: Using typescript@3.0.3 and C:devprojectfrontendsconfig.prod.json
Warning: member-ordering - Bad member kind: public-before-private
Failed to compile.

C:/dev/project/frontend/node_modules/@types/prop-types/node_modules/@types/react/index.d.ts
(2312,14): Duplicate identifier 'LibraryManagedAttributes'.


error Command failed with exit code 1.

--verbose somehow doesn't give me more information.

As I can see LibraryManagedAttributes is defined in:

• node_modules/@types/react/index.d.ts
• node_modules/@types/prop-types/node_modules/@types/react/index.d.ts
• node_modules/@types/react-overlays/node_modules/@types/react/index.d.ts
• ....

Where is this coming from? How can I avoid that?

I want to find out where this error is coming from so that I can report it to the right entity but I don't know where to start.

What else can I try?

Answer 1

This seems te happen because Yarn resolves multiple versions of a package; @types/react in this particular case. Yarn resolves @types/react from your package.json and as a dependency of @types/react-dom.

Take the following snippet from my package.json:

"devDependencies": {
  "@types/react": "^15.0.16",
  "@types/react-dom": "^0.14.23"
  ...
}

The yarn.lock that is created after you run yarn install contains something similar to this:

"@types/react-dom@^0.14.23":
  version "0.14.23"
  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-0.14.23.tgz#cecfcfad754b4c2765fe5d29b81b301889ad6c2e"
  dependencies:
    "@types/react" "*"

"@types/react@*":
  version "16.4.14"
  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.4.14.tgz#47c604c8e46ed674bbdf4aabf82b34b9041c6a04"
  dependencies:
    "@types/prop-types" "*"
    csstype "^2.2.0"

"@types/react@^15.0.16":
  version "15.6.19"
  resolved "https://registry.yarnpkg.com/@types/react/-/react-15.6.19.tgz#a5de18afe65b0f29767328836b48c498a5d3a91b"

Notice that @types/react-dom depends on any version of @types/react as indicated by "*". Yarn resolves two versions of @types/react: "16.4.14" and "15.6.19". This results in the type conflicts you mentioned.

The solution is to add a resolutions field to your package.json to tell Yarn to resolve a specific version of @types/react. Take the following sample:

"resolutions": {
  "@types/react": "^15.0.16"
}

Run yarn install again. Notice the change in the yarn.lock file:

"@types/react-dom@^0.14.23":
  version "0.14.23"
  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-0.14.23.tgz#cecfcfad754b4c2765fe5d29b81b301889ad6c2e"
  dependencies:
    "@types/react" "*"

"@types/react@*", "@types/react@^15.0.16":
  version "15.6.19"
  resolved "https://registry.yarnpkg.com/@types/react/-/react-15.6.19.tgz#a5de18afe65b0f29767328836b48c498a5d3a91b"

Yarn now resolves the same version "15.6.19" for both "@types/react@*" and "@types/react@^15.0.16" dependencies.

I would like to know myself why this is needed. I would expect Yarn to understand it can resolve dependency "@types/react" "*" with "@types/react@^15.0.16" instead of resolving it with the latest version of @types/react.