Adding MDB to Gulp Task Automation & ES6 Project

  1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: Adding MDB to Gulp Task Automation & ES6 Project

joegrotto pro asked 7 years ago

I am using the Google Web Starter Kit to build my project: https://developers.google.com/web/tools/starter-kit/ I enabled ES6 and modified the JavaScript bundle task so that it works properly, but other than that all is the same. I noticed that MDBootstrap is available through NPM and I was looking to use this package in a new project. However, I am having trouble importing it properly so I was wondering if anyone could provide guidance on how they got this working? I am using ES6 in my code and Gulp per the kit above. Right now I get 2 errors:
  • jQuery is not defined in mdb.min.js file
  • Unexpected token import in main.js (primary file in my application)
Please advise and thank you for the help in advance. Link to repo is below: https://github.com/heircompany/arc-webkit

Mirosław Stasiak answered 7 years ago

Hi,
Yes, you can use this:
It is best when you add files manually to HTML, not over the npm:
In down of the head write this

 <link href="css/bootstrap.min.css" rel="stylesheet">
 <link href="css/mdb.min.css" rel="stylesheet">

In down of the body write this

 <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
 <script type="text/javascript" src="js/popper.min.js"></script>
 <script type="text/javascript" src="js/bootstrap.min.js"></script>
 <script type="text/javascript" src="js/mdb.min.js"></script>

Do not forget to add these files to your project


Import problem is not caused by mdb.
You need to set up Gulp correctly, look in google 'gulp es6'

Regards,

joegrotto pro commented 7 years ago

Thank you for your help, I added in the files manually instead of through NPM as you suggested. I also copied all files in to the project. I'm not sure what you're referring to with looking in "google gulp es6" but I have already gotten ES6 working with Gulp. Either way, now I get an error when attempting to bundle my scripts: Error: Cannot find module './picker.js' from 'C:UsersjosepProgrammingarc-webkitappjs' GitHub Repo is updated for reference, any help you can provide is greatly appreciated.

Mirosław Stasiak commented 7 years ago

Have you got Pro Version of MDB?
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
  • User: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes
About author
joegrotto
Pro User
0Support score
1Questions 0Answers
0Snippets likes 0Snippets