adminjs: Invalid hook call on login page

Describe the bug I’m getting the following error:

(node:18527) UnhandledPromiseRejectionWarning: Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
    at resolveDispatcher (/Users/david/workspace/dongwon-api/node_modules/react/cjs/react.development.js:1465:13)
    at Object.useState (/Users/david/workspace/dongwon-api/node_modules/react/cjs/react.development.js:1496:20)
    at ae (/Users/david/workspace/dongwon-api/node_modules/styled-components/dist/styled-components.cjs.js:1:13232)
    at processChild (/Users/david/workspace/dongwon-api/node_modules/admin-bro/node_modules/react-dom/cjs/react-dom-server.node.development.js:3043:14)
    at resolve (/Users/david/workspace/dongwon-api/node_modules/admin-bro/node_modules/react-dom/cjs/react-dom-server.node.development.js:2960:5)
    at ReactDOMServerRenderer.render (/Users/david/workspace/dongwon-api/node_modules/admin-bro/node_modules/react-dom/cjs/react-dom-server.node.development.js:3435:22)
    at ReactDOMServerRenderer.read (/Users/david/workspace/dongwon-api/node_modules/admin-bro/node_modules/react-dom/cjs/react-dom-server.node.development.js:3373:29)
    at renderToString (/Users/david/workspace/dongwon-api/node_modules/admin-bro/node_modules/react-dom/cjs/react-dom-server.node.development.js:3988:27)
    at html (/Users/david/workspace/dongwon-api/node_modules/admin-bro/lib/frontend/login-template.js:73:53)
    at processTicksAndRejections (internal/process/task_queues.js:94:5)
    at async /Users/david/workspace/dongwon-api/node_modules/@admin-bro/express/lib/authentication/login.handler.js:19:23

Installed libraries and their versions

admin-bro@3.4.0
@admin-bro/express @3.1.0
@admin-bro/sequelize @1.2.1
react@16.13.1
react-dom@16.13.1

To Reproduce Steps to reproduce the behavior:

Use buildAuthenticatedRouter to create AdminBro router.
Run the app & visit /admin

Additional context There’s a closed issue about this matter, but I was not able to resolve this problem after removing node_modules or by adding react & react-dom as dependencies.

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 2
Comments: 25 (3 by maintainers)

Most upvoted comments

Fixed by using same react/react-dom versions as in admin-bro dependencies: “react”: “=16.13.1”, “react-dom”: “=16.13.1”

+17

yarikpwnzer on May 18, 2021

Issue is not fixed. After latest update, react needs to be manually installed so that adminjs can run.

petrakoww on Jul 26, 2022

Ok so i just wrote "styled-components": "=4.4.1" in my package.json and it started working 😂. From the third line of stacktrace at ae (C:\Users\maxim\WebstormProjects\portfolio\node_modules\styled-components\src\utils\isStaticRules.js:6:54) i saw that it also uses my newest styled-components package, then it goes to my latest React package. I use Yarn. I assume that it saw that my styled-components version and the one in adminjs are compatible (though not the same, i checked) so it linked it to share with adminjs. That somehow caused the usage of another React version i described above. Thats how i understand it, though it’s kinda a bit crazy. I would be glad if someone can clear this up more.

mkayander on Oct 2, 2021

i ran into this issue again. was working fine until the latest update. however once i updated latest versions of adminjs @adminjs/express @adminjs/mongoose this error started coming. i resolved it by installing react and react-dom into my backend.

basit3407 on Feb 22, 2022

To fix this issue, I switched to yarn and added this in my package.json.

"resolutions": {
    "adminjs/react": "17.0.2",
    "adminjs/react-dom": "17.0.2"
  },

Gr8z on Sep 23, 2021

@kodesak I opened yarn.lock and checked versions of react/react-dom and what I noticed that there were two entries: one was added by me (17.0.2) and another was dependency of admin-bro (16.13.1). It worked also without adding it to my dependencies, but since I’m using eslint I got errors in the code.

yarikpwnzer on May 20, 2021