Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: MDB React v4.12.0 update issue

Venky free asked 5 years ago


Hi,

Today we've got a new version of MDB React (v4.12.0)

I've updated my app with the latest version of it. Since then I'm getting some error (Please check Resources). I've tried changing the versions of React as well because it looks like issue with the React version >16.8.0). I've tried few solutions but couldn't get any luck. We are not able move forward with this error, can we've a solution for this

Resources (screenshots, code snippets etc.)

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.

Please let me know for any further information

Thanks :)


Venky free commented 5 years ago

Hi,

Is there any way that we can downgrade to the older version of MDB? If so please let me know how to do that

Thanks :)


Jakub Mandra staff answered 5 years ago


Have you tried to delete your .lock files and node_modules and then install mdbreact again?

According to https://reactjs.org/warnings/invalid-hook-call-warning.html have you tried to do steps of debugging?

When I set up a fresh create-react-app project and install mdbreact all works well, but yes - there is an error while running npm ls react.

I suggest to try reinstallation vie npm, npm deduplicates the dependencies, so the problem should be vanished.

About dedupe: https://docs.npmjs.com/cli/dedupe.html

But we will fight with that issue and release the patch, or head back to you with @next version.

Best,

Jakub


Venky free commented 5 years ago

Hi Jakub,

I've tried the same, the invalid hooks issue is resolved but getting other issue like this

TypeError: Cannot read property 'type' of undefined
(anonymous function)
D:/Projects/MDBR Not Working Components/node_modules/mdbreact/dist/mdbreact.esm.js:6512
  6509 | var contentClasses = classNames(!popover && "tooltip-inner");
  6510 | return React.createElement(Manager, null, React.createElement(Reference, null, function (_ref2) {
  6511 |   var ref = _ref2.ref;
> 6512 |   return !domElement ? React.createElement(Wrapper.type, _extends({}, Wrapper.props, {
       | ^  6513 |     onMouseEnter: function onMouseEnter() {
  6514 |       return !clickable && setVisible(true);
  6515 |     },
View compiled
InnerReference.render
D:/Projects/MDBR Not Working Components/node_modules/react-popper/lib/esm/Reference.js:36
  33 | 
  34 | _proto.render = function render() {
  35 |   warning(Boolean(this.props.setReferenceNode), '`Reference` should not be used outside of a `Manager` component.');
> 36 |   return unwrapArray(this.props.children)({
     | ^  37 |     ref: this.refHandler
  38 |   });
  39 | };
View compiled
finishClassComponent
D:/Projects/MDBR Not Working Components/node_modules/react-dom/cjs/react-dom.development.js:15320
  15317 | } else {
  15318 |   {
  15319 |     setCurrentPhase('render');
> 15320 |     nextChildren = instance.render();
        | ^  15321 | 
  15322 |     if (debugRenderPhaseSideEffects || debugRenderPhaseSideEffectsForStrictMode && workInProgress.mode & StrictMode) {
  15323 |       instance.render();

Please let me know for any further information

Thanks :)


Jakub Mandra staff commented 5 years ago

Hey,

That's very confusing. Can you share the code where you use Tooltip or Popover (error record concerns those components)? Or you do not use those components?

Also, we have developed mdbreact with peer dependencies for react, you can test it by installing mdbreact from @next branch.

git+https://oauth2:API_KEY@git.mdbootstrap.com/mdb/react/re-pro.git@next

Best,

Jakub


Venky free commented 5 years ago

Hey Jakub,

Thanks for the response, I've removed all the Tooltips code from from my source code and then tried to install it and it worked well.

Now everything is works fine

Thanks :)


Jakub Mandra staff commented 5 years ago

Hi,

Today we released v.4.13.0 and all those problems should be repaired. Please update if you like :)

Best,

Jakub


Jakub Mandra staff commented 5 years ago

Hi,

Today we released v.4.13.0 and all those problems should be repaired. Please update if you like :)

Best,

Jakub


gllermaly free answered 5 years ago


Same issue here, downgraded to 4.11.1 and worked , please fix new versions soon !!


react project free commented 4 years ago

How to downgrade ?pls help me regarding this issue


Piotr Glejzer staff commented 4 years ago

install dependencies with a version for example: `npm install mdbreact@4.26.0


Gururaj Kotian free commented 4 years ago

But i think there' s a issue with reactjs 17.0.1 update.i have tried all the methods by downgrading mdb but it doeant work for me.Even if i try to dowgrade react ,its not getting downgraded.


Piotr Glejzer staff commented 4 years ago

which component doesn't work with that?



Answering your question from the comment, it's possible to downgrade the version. To do so, in your package.json modify the MDB React dependency to look like this:

"dependencies": {
  "mdbreact": "git+https://oauth2:YOUR_TOKEN_GOES_HERE@git.mdbootstrap.com/mdb/react/re-pro.git#4.11.1"
}

Of course, you can replace 4.11.1 with any version you need. You can find the full list of available versions here


Venky free commented 5 years ago

Hi,

Thanks for the quick fix for the above comment.

If I upgrade to the newer version of MDBR again I might get the same issue which I mentioned earlier, can we've the fix for the same

For your reference

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.

Thanks :)


Bartłomiej Malanowski staff commented 5 years ago

Could you please update your version of React in your project?


Venky free commented 5 years ago

Hi,

I've installed new version of react (16.8.6), still not working


FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Closed

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.11.1
  • Device: All Devices
  • Browser: All Browsers
  • OS: Windows and Ubuntu
  • Provided sample code: No
  • Provided link: No
Tags