Topic: Ugrading MDB React Gatsby project to Pro
I have a project I build using MDB React and Gatsby using this blog post as a guide: https://mdbootstrap.com/articles/react/gatsby-mdb-react-quick-start-quide/ I would like to use some Pro components - specifically the Timeline. I was able to get access to the GITLab repo and I tried running
npm install --save mdbreact
This appears to work
+ mdbreact@4.17.0
added 8 packages from 6 contributors, removed 24 packages, updated 9 packages, moved 3 packages and audited 31184 packages in 13.666s
found 0 vulnerabilities
But when I try to run Gatsby Develop I run into an error:
ERROR Failed to compile with 1 errors 10:47:52 AM
⠀
This dependency was not found:
⠀
* react-router-dom in ./node_modules/mdbreact/dist/mdbreact.esm.js
⠀
To install it, you can run: npm install --save react-router-dom
｢wdm｣:
ERROR in ./node_modules/mdbreact/dist/mdbreact.esm.js
Module not found: Error: Can't resolve 'react-router-dom' in '/Users/viccooper/Desktop/HearRo Web
Gatsby July 2019/HearRo Gatsby MDB
React/gatsby-material-design-for-bootstrap/node_modules/mdbreact/dist'
@ ./node_modules/mdbreact/dist/mdbreact.esm.js 7:0-56 5586:33-42 5791:33-42
@ ./src/pages/index.js
@ ./.cache/sync-requires.js
｢wdm｣: Failed to compile.
I got past that error by installing react-router-dom
npm install --save react-router-dom
Gatsby uses it's own router but hopefully just installing react-router-dom will not break it. But after all that I still get errors trying to load MDBTimeline
warning in ./src/components/how.js
⠀
"export 'MDBTimeline' was not found in 'mdbreact'
⠀
warning in ./src/components/how.js
⠀
"export 'MDBTimelineStep' was not found in 'mdbreact'
⠀
warning in ./src/components/how.js
⠀
"export 'MDBTimelineStep' was not found in 'mdbreact'
⠀
warning in ./src/components/how.js
⠀
"export 'MDBTimelineStep' was not found in 'mdbreact'
⠀
warning in ./src/components/how.js
⠀
"export 'MDBTimelineStep' was not found in 'mdbreact'
⠀
warning in ./src/components/how.js
⠀
"export 'MDBTimelineStep' was not found in 'mdbreact'
These are the same errors I got using the non-Pro MDBReact. Any suggestions on what I can try next? Thanks, Vic
Hello Is there any updates on Gatsby specifically to be able to use bootstrap 5 ? This post appears to be the only reference to it but is 2 years old and MDBbootstrap has gone to 5 now . Have used the steps laid out above but see a lot of depreciated plugins in the load. thanks in advance Mark
Krzysztof Wilk staff commented 3 years ago
Hi!
If you mean MDB4 React - there's no update. We are using Bootstrap 5 in our latest MDB5 React, so you can try to use it along with gatsby :)
Keep coding!
I think I spoke too soon when I said it was working. I was able to get the timeline component to load but I can't get rounded buttons or a carousel to work. I don't see any errors anymore on running gatsby build Any suggestions for where i can look to troubleshoot?
Aliaksandr Andrasiuk staff commented 5 years ago
Hi,
Carousel which is presented in the tutorial's application is located under the Intro section(z-index property value less than Introe's z-index). To make sure you can add a style property to the Carousel : style={{ zIndex: "0"}} and it will get clickable.
Can't find the problem with rounded buttons. I added a rounded property to existing on the page buttons and created buttons with this property and all are they work well.
Can you show me your code with not working buttons?
As a reference here's what my package.json file looks like to get the MDBReact pro version working (The key is a non-working key BTW)
{
"name": "gatsby-material-design-for-bootstrap",
"private": true,
"description": "A simple starter which lets you quickly start developing with Gastby and Material Design For Bootstrap",
"version": "0.1.0",
"author": "Anna Morawska <a.morawska@mdbootstrap.com>",
"dependencies": {
"@svgr/webpack": "^4.1.0",
"gatsby": "^2.0.76",
"gatsby-image": "^2.0.20",
"gatsby-plugin-manifest": "^2.2.1",
"gatsby-plugin-offline": "^2.0.16",
"gatsby-plugin-react-helmet": "^3.0.2",
"gatsby-plugin-sass": "^2.1.0",
"gatsby-plugin-sharp": "^2.0.14",
"gatsby-plugin-svgr": "^2.0.1",
"gatsby-source-filesystem": "^2.0.8",
"gatsby-transformer-sharp": "^2.1.8",
"mdbreact": "git+https://oauth2:RKdfgsdfgdHGoFHUVmy@git.mdbootstrap.com/mdb/react/re-pro.git#",
"node-sass": "^4.12.0",
"prop-types": "^15.6.2",
"react": "^16.6.3",
"react-dom": "^16.6.3",
"react-helmet": "^5.2.0",
"react-router-dom": "^5.0.1"
},
"keywords": [
"gatsby",
"material-design",
"material-design-for-bootstrap",
"MDB",
"MDB React"
],
"license": "MIT",
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"start": "npm run develop",
"format": "prettier --write \"src/**/*.js\"",
"test": "echo \"Write tests! -> https://gatsby.app/unit-testing\""
},
"devDependencies": {
"prettier": "^1.15.2"
},
"repository": {
"type": "git",
"url": "https://github.com/anna-morawska/gatsby-material-design-for-bootstrap"
},
"bugs": {
"url": "https://github.com/anna-morawska/gatsby-material-design-for-bootstrap/issues"
}
}
Then I ran npm i and all the pro components started working. PHEW!
I tried deleting the node_modules folder and package-lock.json file and running npm i but that did not help.
I will try to install the tutorial from the beginning but how do I generate an oauth2 token for the GitLab repo?
viccooper142 free commented 5 years ago
OK, I dug around on other posts about Tokens and got it working. For anyone else trying to figure this out I missed the Pro installation steps after I bought the upgrade. I needed to follow these instructions https://mdbootstrap.com/docs/react/getting-started/quick-start/ (make sure you click on the Pro tab under each set of instructions)
Hi,
In 4.15.0 release we moved react-router-dom to the peerDependencies. Now mdbreact requires installing the react-router-dom to work.
You can try to delete node_modules folder and package-lock.json file and install all the dependencies : npm i .
If it won't help:
Can you try to do the tutorial from the beginning?
After Gatsby template will be installed add the mdbreact as the dependency with the link to our GitLab repository with the generated token:
"mdbreact": "git+https://oauth2:YOUR_TOKEN@git.mdbootstrap.com/mdb/react/re-pro.git#"
After that try npm i. If it will be installed successfully then try npm i react-router-dom.
I tried the steps above and successfully installed and opened the application.
Hope it would help you.
Best regards.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: MDB React
- MDB Version: 4.17.0
- Device: Macbook Pro
- Browser: Chrome
- OS: MacOS
- Provided sample code: No
- Provided link: Yes