search

mdbootstrap / mdb-react-ui-kit

React 18 & Bootstrap 5 & Material Design 2.0 UI KIT
https://mdbootstrap.com/docs/b5/react/
Other
1.41k stars 264 forks source link

Invalid hook call #104

Closed thib3113 closed 4 years ago

thib3113 commented 4 years ago

Starting from version 4.23.1, I get this error (with code from 4.23.1, more verbose than last update) : 

Uncaught 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 (react.development.js:1465)
    at useState (react.development.js:1496)
    at Button (mdbreact.esm.js:4228)
    at renderWithHooks (react-dom.development.js:14826)

Version 4.23.0 works, each version after 4.23.0 (including 4.23.1), throw the same Error, just they are minified now, so hard to read .

Also, it seems, something try to load <anonymous> ( example I'm on /test and I see a call to /test/%3Canonymous%3E ), this seems to be linked, because disapear with V4.23.0 .

Just creating a Button show the error, no need of prop types .

<Button> 
   test
</Button>

React : 16.13.0 node-sass : 4.13.1 react-scripts : 3.4.1 node : 13.10.1 I'm using Class Components.

pglejzer commented 4 years ago

Is that all your code? If not, may you show me all? Which version od MDBReact do you use?

thib3113 commented 4 years ago

I can't share my code directly (I'll need to do a samble project), the only things I saw, is, removing the Button resolve the problem, re-adding the Button reproduce the bug .

About the version of MDBReact, this stack trace is generated with 4.23.1, and each future version produce the same bug (but with difference stack trace, because now the file is minified) . If I'm back to 4.23.0, It's works fine .

pglejzer commented 4 years ago

I don't see a problem with a Button component in our latest version. So If you can't show me a code that as a result I can't reproduce this problem and can't solve it. I close this topic and if you have more question let me know.

VMLVaske commented 4 years ago

Hi! I'm having the same issue (I think).

Uncaught 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

Using mdbreact 4.27.0. I have tried using the code example from your website directly (https://mdbootstrap.com/docs/react/navigation/compositions/ -> Full page intro with fixed NavBar)

Figured it out to MDBView that's causing the hook-error. Also using class component.