Cannot use AdminJS + Typescript + (@types/)React v17

AdminJS relies on react v16. If the rest of your app uses React v17, Typescipt gets very mad.

../node_modules/@types/react/index.d.ts:3094:14 - error TS2300: Duplicate identifier 'LibraryManagedAttributes'.

3094         type LibraryManagedAttributes<C, P> = C extends React.MemoExoticComponent<infer T> | React.LazyExoticComponent<infer T>
                  ~~~~~~~~~~~~~~~~~~~~~~~~

  ../node_modules/adminjs/node_modules/@types/react/index.d.ts:3091:14
    3091         type LibraryManagedAttributes<C, P> = C extends React.MemoExoticComponent<infer T> | React.LazyExoticComponent<infer T>
                      ~~~~~~~~~~~~~~~~~~~~~~~~
    'LibraryManagedAttributes' was also declared here.

../node_modules/@types/react/index.d.ts:3105:13 - error TS2717: Subsequent property declarations must have the same type.  Property 'a' must be of type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>', but here has type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>'.

3105             a: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
                 ~

  ../node_modules/adminjs/node_modules/@types/react/index.d.ts:3104:13
    3104             a: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
                     ~
    'a' was also declared here.

This comes from different versions of @types/react being installed:

$ cat node_modules/adminjs/node_modules/@types/react/package.json | grep version
    "version": "16.14.17",
$ cat node_modules/@types/react/package.json | grep version
    "version": "17.0.30",

You can see the miss-matched versions of react with npm ls react and that react-redux is the culprit:

├─┬ @testing-library/react@12.1.1
│ └── react@17.0.2 deduped
├─┬ adminjs@5.2.2
│ ├─┬ @adminjs/design-system@2.0.2
│ │ ├─┬ @carbon/icons-react@10.41.0
│ │ │ └── react@17.0.2 deduped
│ │ ├─┬ react-datepicker@3.8.0
│ │ │ ├─┬ react-onclickoutside@6.12.0
│ │ │ │ └── react@17.0.2 deduped
│ │ │ ├─┬ react-popper@1.3.11
│ │ │ │ ├─┬ @hypnosphi/create-react-context@0.3.1
│ │ │ │ │ └── react@17.0.2 deduped
│ │ │ │ └── react@17.0.2 deduped
│ │ │ └── react@17.0.2 deduped
│ │ └── react@16.13.1 deduped
│ ├─┬ react-beautiful-dnd@13.1.0
│ │ ├─┬ react-redux@7.2.5
│ │ │ └── react@17.0.2 deduped
│ │ ├── react@17.0.2 deduped
│ │ └─┬ use-memo-one@1.1.2
│ │   └── react@17.0.2 deduped
│ ├─┬ react-dom@16.13.1
│ │ └── react@16.13.1 deduped
│ ├─┬ react-i18next@11.12.0
│ │ └── react@17.0.2 deduped
│ ├─┬ react-redux@7.2.0
│ │ └── react@16.13.1 deduped. // <---
│ ├─┬ react-router-dom@5.2.0

Installed libraries and their versions

"adminjs": "5.2.2",
"@adminjs/passwords": "2.0.0",
"@adminjs/sequelize": "2.0.0",
"react": "17.0.2",
"@types/react": "17.0.30",

Desktop (please complete the following information if relevant):

• OSX
• node version - v15.14.0
• npm version - 7.20.1

[vladiulianbogdan]

I have the same problem. In my project, the only module that is using React is AdminJS. I’ve tried to see why there were 2 different versions of React in my project and it seems that, if I understand correctly, admin js is bringing them:

yarn why node_modules/@types/react/

yarn why v1.22.4
[1/4] 🤔  Why do we have the module "node_modules/@types/react/"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "@types/react@17.0.36"
info Has been hoisted to "@types/react"
info Reasons this module exists
   - Hoisted from "adminjs#react-beautiful-dnd#react-redux#@types#react-redux#@types#react"
   - Hoisted from "adminjs#react-beautiful-dnd#react-redux#@types#react-redux#@types#hoist-non-react-statics#@types#react"
info Disk size without dependencies: "196KB"
info Disk size with unique dependencies: "1.35MB"
info Disk size with transitive dependencies: "1.35MB"
info Number of shared dependencies: 3
=> Found "adminjs#@types/react@16.14.4"
info This module exists because "adminjs" depends on it.
info Disk size without dependencies: "168KB"
info Disk size with unique dependencies: "1.3MB"
info Disk size with transitive dependencies: "1.3MB"
info Number of shared dependencies: 2
✨  Done in 1.29s.

Is there a fix or a way to work around this issue?

[evantahler]

cc @krishnaglick