Topic: Manual zip install

Fathom5 free asked 2 years ago


Expected behavior Downloaded and copied 'mdbreact-5.0.2.tgz' (this version is not selectable in the menu above) into root directory of existing React project. Linked in package.json dependency. After npm install when using the Stepper component react throws error "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://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem."

Troubleshooting I was able to determine that there are multiple React v 17.0.1 in my project but I am unable to resolve the issue. I purchased the MDB Pro version and have spent most of a day trying to implement into my project with no success. Per the instructions to manually install with a zip package... 1. downloaded mdb4-react-ui-kit-pro-essential from 'my orders' 2. unzipped to my local system and opened in the vscode. 3. When copying components into my project to compose my website I have run into issues all day stating the MDBStep is a Pro Component or there are multiple React versions in your project.

Can you assist with directions on how my project directory should be setup to integrate MDB Pro into my react project? Do I need to include mdbreact-5.0.2.tgz into my project? Please clarify how my project is aware that I am using MDB Pro version. When using the free version with no Pro Components I was not experiencing these issues.

Actual behavior

Resources (screenshots, code snippets etc.)


jkilbride free answered 2 years ago


The guys at npm changed the install behavior. The latest version, 7+, tries to install all peer dependencies and will break if any peer dependencies are missing. You can try using the --legacy-peer-dependencies flag or switch to yarn. If you switch to yarn, stick with version 1 rather than version 2 for now.

Switching to yarn fixed this problem for me.


Krzysztof Wilk staff answered 2 years ago


Hi!

The problem with this error is that it doesn't show on some devices (i.e. I never got it). You can paste here your corresponding mail so I'll send you a project that works for me.

Anyway - I found another solution that could help you. Please, check the steps below:

  1. Open your project directory (in my case that was a simple one made with Create React App)
  2. Remove node_modules catalog and clean cache of your npm or yarn to make sure that everything will install properly
  3. In the package.json file remove react and react-dom dependencies. Also, add MDB React from the .tgz file (exactly as I wrote above). The trick is that React will install from the package, so it won't be duplicated.
  4. Import style files into the src/index.js before the App.js file import: import '@fortawesome/fontawesome-free/css/all.min.css'; import 'bootstrap-css-only/css/bootstrap.min.css'; import 'mdbreact/dist/css/mdb.css';
  5. Now try to run yarn or npm install to install dependencies
  6. Run your app and check if the problem still occurs

Keep coding!


Fathom5 free answered 2 years ago


Hi! Thanks for providing the details. I have tried this before and when setting up in my existing react project there is an error message..

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://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

From troubleshooting it does seem to indicate there are multiple versions of React. One for my project and one included when copying the mdbreact-5.0.2.tgz file. I have tried npm dedupe as recommended but the error is not resolved. Can you provide an example project directory that shows how to properly import pro components into an existing react project while addressing the multiple react error?


Krzysztof Wilk staff answered 2 years ago


Hi!

Yes, you can copy the mdbreact-5.0.2.tgz file to your project and add it as mdbreact dependency (I mean file from inside of the package you can download). For example - if you have this file where you have your package.json you can add this line to the dependencies like this:

"mdbreact": "./mdbreact-5.0.2.tgz"

Keep coding!


Krzysztof Wilk staff answered 2 years ago


Hi!

You can check how to install MDB React Pro into the existing project here: https://mdbootstrap.com/docs/react/getting-started/installation/.

In short:

  1. You have to create an access token on our GitLab
  2. Inside your project run npm install git+https://oauth2:YOUR_TOKEN_GOES_HERE@git.mdbootstrap.com/mdb/react/re-pro.git --save command
  3. Import style files into the src/index.js before the App.js file import: import '@fortawesome/fontawesome-free/css/all.min.css'; import 'bootstrap-css-only/css/bootstrap.min.css'; import 'mdbreact/dist/css/mdb.css';
  4. Start your app :)

To remove multiple React copies in your project, try to run the npm dedupe command. I think it should help :)

Keep coding!


Fathom5 free commented 2 years ago

Thanks for your response Krzysztof. I never received a gitlab account after checking my junk mail. It was also stated in an earlier question I had that the license I purchased doesn't have gitlab repo access. Without gitlab how do I implement MDB React Pro into my project? It seems like without a token there wouldn't be anything associating my account with Pro and not the Free version.


Krzysztof Wilk staff commented 2 years ago

You have purchased a Single Use license that does not include access to GitLab. To get an account, you need at least an essential license


Fathom5 free commented 2 years ago

How do I implement the MDB React Pro into my existing react project with the single use license? Can you assist with directions on how my project directory should be setup to integrate MDB Pro into my react project? Do I need to include the mdbreact-5.0.2.tgz file in my project? Please clarify how my project is aware that I am using MDB Pro version and not the Free Version. When using the free version with no Pro Components I was not experiencing these issues.



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: MDB4 5.0.1
  • Device: mac pro
  • Browser: firefox
  • OS: big sur
  • Provided sample code: No
  • Provided link: Yes