Invalid hook call on login page #810

ItsYou · 2021-04-11T13:01:18Z

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.

The text was updated successfully, but these errors were encountered:

dziraf · 2021-04-11T13:18:56Z

Just confirming, are you using admin-bro-expressjs or @admin-bro/express?

Also, what's the version of your @admin-bro/design-system?

ItsYou · 2021-04-11T13:41:27Z

@dziraf My mistake, I'm using @admin-bro/express^3.1.0, and @admin-bro/design-system version is 1.7.0.

dziraf · 2021-04-11T13:54:01Z

I will try to reproduce this error tomorrow. I DID get this error before, but only when developing admin-bro packages by yarn link-ing them though.

Two extra questions:

Is it an existing project and this is a new error or you've only just setup admin bro?
Could you check what's the package version of React in:
/node_modules/react/package.json
and
/node_modules/@admin-bro/design-system/node_modules/react/package.json
/node_modules/admin-bro/node_modules/react/package.json
It should be at the top.

ItsYou · 2021-04-11T14:05:10Z

First off, thanks for looking into this issue.
To answer your questions,

I started using admin-bro recently but just recently set up buildAuthenticatedRouter and encountered this error.
react version in /node_modules/react is 16.13.1, node_modules/@admin-bro/design-system is 16.13.1, and finally in node_modules/admin-bro is also 16.13.1.

To provide a bit more context, I'm using a custom dashboard but I don't think it's related to this as the hook errors show up even when I'm using the vanilla dashboard. I'm starting to assume that this doesn't have to do with react/react-dom version mismatch.

dziraf · 2021-04-15T20:06:51Z

I tried to reproduce on a clean project but I'm not experiencing this problem there.

Are you able to set up a simple repository where this error occurs for you so that I can clone it?

Also, we've released admin-bro@v4.0.1 - I doubt updating will help in this case but is worth trying

ItsYou · 2021-04-19T14:33:36Z

I ended up fixing this problem. These are the steps I took:

Removed node_modules completely again
Deleted react & react-dom from dependencies in my package.json
Ran npm install again
On install, npm was complaining about missing peer dependencies for admin-bro like before (react, react-dom, etc).
Used install-peerdeps on admin-bro packages.
Works like a charm

asakoulas · 2021-05-17T03:55:36Z

After trying everything that has been mentioned about this error, it continues to persist... I don't know what to do...

asakoulas · 2021-05-18T00:22:49Z

This error disappears when I use admin-bro@3.2.5....

yarikpwnzer · 2021-05-18T19:26:38Z

Happened to me on buildAuthenticatedRouter:
"@admin-bro/design-system": "^1.7.3",
"@admin-bro/express": "^3.1.0",
"@admin-bro/mongoose": "^1.1.0",
"@admin-bro/passwords": "^1.0.3",
"admin-bro": "^4.0.1",
"express-formidable": "^1.2.0",
"express-session": "^1.17.1",
"react": "^17.0.2",
"react-dom": "^17.0.2"
Using yarn as package manager.

yarikpwnzer · 2021-05-18T19:52:38Z

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

asakoulas · 2021-05-18T22:24:49Z

@yarikpwnzer Well I tried with the exact same version but it doesn't work either. It only works if I use admin-bro@3.2.5.

asakoulas · 2021-05-19T00:47:37Z

What is the difference between admin-bro-expressjs an @admin-bro/express ??

asakoulas · 2021-05-19T01:05:22Z

I was just playing with the packages (deleting and re-downloading them and changing their versions) and it just started working. Weird...
sorry for all of the comments

yarikpwnzer · 2021-05-19T07:47:08Z

@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.

RudrikaJnext · 2021-06-14T13:43:28Z

I am getting the same error. It works totally fine with local server but when I try to run in the Testing or Staging server it throws this error. I have referred all the solutions regarding this from https://reactjs.org/warnings/invalid-hook-call-warning.html. I think I have multiple react as shown in attached image but I am not able to figure out how can I correct the tree or solve it. Thanks in advance!

asakoulas · 2021-06-18T03:24:57Z

At this point, I am probably going to abandon this package because of this error that is stopping me every time...

mkayander · 2021-08-14T21:26:09Z

I get this issue when i have React version ^17.0.2 in my dependencies. If i change it to adminjs version 16.13.1 the issue disappears. But then my Next.JS SSR stops working (monorepo). I need it to work with my main React dependency being of version ^17.0.2 somehow.
@dziraf Could you suggest a solution please?

mkayander · 2021-08-14T21:57:56Z

Coming from the error message:

(node:20508) 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://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    at resolveDispatcher (C:\Users\maxim\WebstormProjects\portfolio\node_modules\react\cjs\react.development.js:1476:13)
    at Object.useState (C:\Users\maxim\WebstormProjects\portfolio\node_modules\react\cjs\react.development.js:1507:20)
    at ae (C:\Users\maxim\WebstormProjects\portfolio\node_modules\styled-components\src\utils\isStaticRules.js:6:54)
    at processChild (C:\Users\maxim\WebstormProjects\portfolio\node_modules\adminjs\node_modules\react-dom\cjs\react-dom-server.node.development.js:3043:14)
    at resolve (C:\Users\maxim\WebstormProjects\portfolio\node_modules\adminjs\node_modules\react-dom\cjs\react-dom-server.node.development.js:2960:5)
    at ReactDOMServerRenderer.render (C:\Users\maxim\WebstormProjects\portfolio\node_modules\adminjs\node_modules\react-dom\cjs\react-dom-server.node.development.js:3435:22)
    at ReactDOMServerRenderer.read (C:\Users\maxim\WebstormProjects\portfolio\node_modules\adminjs\node_modules\react-dom\cjs\react-dom-server.node.development.js:3373:29)
    at renderToString (C:\Users\maxim\WebstormProjects\portfolio\node_modules\adminjs\node_modules\react-dom\cjs\react-dom-server.node.development.js:3988:27)
    at html (C:\Users\maxim\WebstormProjects\portfolio\node_modules\adminjs\lib\frontend\login-template.js:73:53)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at C:\Users\maxim\WebstormProjects\portfolio\node_modules\@adminjs\express\src\authentication\login.handler.ts:27:19

I think the first probable reason 1. You might have mismatching versions of React and the renderer (such as React DOM) might be the case. Because from the stacktrace above, we see that react-dom is used from the node_modules\adminjs\node_modules\react-dom directory (older version), but then react is used from node_modules\react directory (newer version, which is specified in package.json).
That being said, it makes sense why lowering the react version in package.json fixes the issue. Yet i currently don't know why this behaviour appears and how to make it work like the rest of the app does. (Everything in adminjs works fine except the login page)

mkayander · 2021-08-14T22:17:24Z

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.

Gr8z · 2021-09-23T11:45:05Z

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"
  },

RolandVrignon · 2021-09-23T14:11:16Z

I'm stucked in this issue. I'm working on a project on two pc. On the first it always have been worked and on my new pc i have this issue even if i have same package.json file with same versions on both pc, i don't understand why...

Edit : it works fine with @yarikpwnzer 's solution, thanks man !

coolprinze · 2021-11-02T06:38:36Z

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

This worked for me, after a whole day of trying to figure out the issue. Thanks a bunch

basit3407 · 2022-02-22T10:37:49Z

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.

yassir63 · 2022-07-22T08:16:48Z

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.

This worked for me just fine after many tries as it auto-updates all dependencies !

petrakoww · 2022-07-26T15:01:27Z

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

dziraf closed this as completed Dec 28, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Invalid hook call on login page #810

Invalid hook call on login page #810

ItsYou commented Apr 11, 2021 •

edited

dziraf commented Apr 11, 2021 •

edited

ItsYou commented Apr 11, 2021

dziraf commented Apr 11, 2021

ItsYou commented Apr 11, 2021 •

edited

dziraf commented Apr 15, 2021

ItsYou commented Apr 19, 2021

asakoulas commented May 17, 2021

asakoulas commented May 18, 2021

yarikpwnzer commented May 18, 2021

yarikpwnzer commented May 18, 2021

asakoulas commented May 18, 2021

asakoulas commented May 19, 2021

asakoulas commented May 19, 2021

yarikpwnzer commented May 19, 2021 •

edited

RudrikaJnext commented Jun 14, 2021

asakoulas commented Jun 18, 2021

mkayander commented Aug 14, 2021 •

edited

mkayander commented Aug 14, 2021 •

edited

mkayander commented Aug 14, 2021 •

edited

Gr8z commented Sep 23, 2021

RolandVrignon commented Sep 23, 2021 •

edited

coolprinze commented Nov 2, 2021

basit3407 commented Feb 22, 2022

yassir63 commented Jul 22, 2022

petrakoww commented Jul 26, 2022

Invalid hook call on login page #810

Invalid hook call on login page #810

Comments

ItsYou commented Apr 11, 2021 • edited

dziraf commented Apr 11, 2021 • edited

ItsYou commented Apr 11, 2021

dziraf commented Apr 11, 2021

ItsYou commented Apr 11, 2021 • edited

dziraf commented Apr 15, 2021

ItsYou commented Apr 19, 2021

asakoulas commented May 17, 2021

asakoulas commented May 18, 2021

yarikpwnzer commented May 18, 2021

yarikpwnzer commented May 18, 2021

asakoulas commented May 18, 2021

asakoulas commented May 19, 2021

asakoulas commented May 19, 2021

yarikpwnzer commented May 19, 2021 • edited

RudrikaJnext commented Jun 14, 2021

asakoulas commented Jun 18, 2021

mkayander commented Aug 14, 2021 • edited

mkayander commented Aug 14, 2021 • edited

mkayander commented Aug 14, 2021 • edited

Gr8z commented Sep 23, 2021

RolandVrignon commented Sep 23, 2021 • edited

coolprinze commented Nov 2, 2021

basit3407 commented Feb 22, 2022

yassir63 commented Jul 22, 2022

petrakoww commented Jul 26, 2022

ItsYou commented Apr 11, 2021 •

edited

dziraf commented Apr 11, 2021 •

edited

ItsYou commented Apr 11, 2021 •

edited

yarikpwnzer commented May 19, 2021 •

edited

mkayander commented Aug 14, 2021 •

edited

mkayander commented Aug 14, 2021 •

edited

mkayander commented Aug 14, 2021 •

edited

RolandVrignon commented Sep 23, 2021 •

edited