Invalid hook call

[radzk]

I'm trying to use it with simplest code shown in the examples, but it doesnt work for me. Adding an import:

import ReactSelectMaterialUi from "react-select-material-ui";

plus a line:

 <ReactSelectMaterialUi style={{ width: 100 }} value="Europe"  />

occurs with error below. Could anyone help me?

Invariant Violation: 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.

[iulianraduat]

Hi,

ReactSelectMaterialUi does not use hooks so this error cannot be caused by this component. Please check how you use the hooks.

[RoiEXLab]

@iulian-radu-at I think there's some truth to @radzk's statement. If you look at the error-message, it tells you that there might be multiple versions of react/react-dom, which seems to be the real issue here. Basically because you reference react in your dependencies in package.json there are multiple react dependencies that cause this issue when you add react to your own dependencies as you should in most cases. The react and react-dom dependency needs to be a peerDependency exclusively, otherwise this error occurs starting with react 16.9.0 it looks like

[iulianraduat]

@RoiEXLab Thanks for your input. For me it was strange to get an error about hooks as long as I do not use them. If you or someone else can provide me with a code to reproduce this error, then I can try your suggestion to see if it is a fix. Thanks

[RoiEXLab]

Ok, I tried creating a clean project to reproduce this issue, but apparently npm tried to be smart and prevented me from running into this issue again. This is what I got from running npm list react: As you can see the same version of react is in node_modules twice in different directories, which resulted in this error: Now after running npm dedupe I get this "normalized" tree: Which links the dependency of react-select-material-ui to the global dependency of the project. Now the app works without problems because there's only a single version of react present.

So how did I get into this deduped state? NPM doesn't try to dedupe dependencies when they previously differed in versions, so I had explicitly required react/react-dom 16.8.0 in my package.json along with react-select-material-ui@4.3.0. Now the versions of react didn't match, so npm created 2 directories. After upgrading my root level dependency of react, the root level version was updated, but the nested version was untouched resulting in two versions of the same dependency which causes the error.

TL;DR: npm dedupe might be a workaround if the dependency versions match, but ideally react-select-material-ui would include react/react-dom as peerDependency exclusively so there's no chance to even run into this issue in the first place. You shouldn't keep the version range strict, only require what's necessary for this library to work, and in order to keep the latest version of the dependency, you can adjust the package-lock.json so it forces the newer version.

[iulianraduat]

Many thanks @RoiEXLab for your quick and great answer. I will do the change suggested by you with the next package (it should be out in the next days).

[RoiEXLab]

Thank you very much!

[iulianraduat]

I thank you @RoiEXLab 💪👍