1. MDB Home Page
  2. Support Main Page
  3. MDB React
Topic: Ugrading MDB React Gatsby project to Pro

viccooper142 free asked 4 years ago

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

mark-steven-au premium answered 3 years ago

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!

viccooper142 free answered 4 years ago

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 4 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?

viccooper142 free answered 4 years ago

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!

Aliaksandr Andrasiuk staff commented 4 years ago

Glad it works now! Happy codding! ;)

viccooper142 free answered 4 years ago

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 4 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)

Aliaksandr Andrasiuk staff answered 4 years ago

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.

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

Answered

Specification of the issue
  • 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
Tags
gatsby gatsbyjs
About author
viccooper142
45Support score
1Questions 4Answers 0Snippets