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!

  1. MDB Home Page
  2. Support Main Page
  3. MDB React
Topic: Steps for adding MDB to existing project

pcdavis pro asked 6 years ago

I have an existing React project that was created with create react app. Here are the steps I used to try and add mdb to the project: 1. npm install --save font-awesome@4.7.0 bootstrap@4.0.0 react-error-overlay@4.0.0 2. Then I added the line below to my package.json file: "mdbreact": "git+https://github.com/mdbootstrap/React-Bootstrap-with-Material-Design.git" 3. Then I added the three import statements below to my index.js file: import 'font-awesome/css/font-awesome.min.css'; import 'bootstrap/dist/css/bootstrap.min.css'; import 'mdbreact/dist/css/mdb.css'; I am getting the following error: Failed to compile 
./src/index.js
Module not found: Can't resolve 'mdbreact/dist/css/mdb.css' in 'c:UserspcdavDesktopWebDevDevMntJan26-Fridaysimulations-onesrc'
When I open the node modules folder, I find mdbreact but when I scan my files there is no mdb.css file anywhere. Am I supposed to drag and drop folders and files from the zipped pro download into my project?

jkilbride free answered 6 years ago

You need to run "npm install" after editing your package.json file. I don't get any errors, which means my project is able to find the mdb.css file, but the Card component is not working for me. I copied the code from the Basic Example here: https://mdbootstrap.com/react/components/cards/ This is what I'm getting: I'm currently using the free package to test before purchasing. Any help from support would be appreciated.

jkilbride free commented 6 years ago

Well, some of the other components are working. Container, Row, Col, and Input all seem okay. It's only the Card example, so far, that I'm having problems with.

jkilbride free commented 6 years ago

Ok, I figured it out. The Card in the Basic Example has a width of 23rem, which isn't in the example code. I had to look at the page source in Chrome Developer Tools to find it. Setting the width of the Card to 23rem fixed the issue I was having. For the MDB staff, you should add that to the example code. It's very confusing without it.
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

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

Resolved

Specification of the issue
  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB React
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: No
Tags
About author
pcdavis
Pro User 24Support score
7Questions 2Answers 0Snippets