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.

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!

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?

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!

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!