Webpack Support ETA?

brisbushwalkers asked 5 years ago

Hello I am evaluating MDB for use with a nonprofit website. I am building the website using react, and packaging using webpack. I note that, in another thread, webpack support is in MDB's TODO list. Any idea how far off this is? In the interim, is there a known way to integrate MDB into a react app compiled with webpack? Many thanks.

jkilbride answered 5 years ago

To use MDB with Webpack, you can load the modules individually in your entry file using script-loader. For example, my entry file is in /client/index.js, Bootstrap is in /client/js/bootstrap/, and MDB files are in /client/js/mdb/, so I put the following at the top of my index.js file:
// Bootstrap.
require('script-loader!uglify-loader!./js/bootstrap/bootstrap.js');

// MDB modules
require('script-loader!uglify-loader!./js/mdb/jquery-easing.js');
require('script-loader!uglify-loader!./js/mdb/global.js');
require('script-loader!./js/mdb/velocity.min.js');
require('script-loader!uglify-loader!./js/mdb/chart.js');
require('script-loader!uglify-loader!./js/mdb/wow.js');
require('script-loader!uglify-loader!./js/mdb/scrolling-nav.js');
require('script-loader!uglify-loader!./js/mdb/waves.js');
require('script-loader!uglify-loader!./js/mdb/preloading.js');
require('script-loader!uglify-loader!./js/mdb/card-reveal.js');
require('script-loader!uglify-loader!./js/mdb/character-counter.js');
require('script-loader!uglify-loader!./js/mdb/toasts.js');
require('script-loader!uglify-loader!./js/mdb/smooth-scroll.js');
require('script-loader!uglify-loader!./js/mdb/dropdown.js');
require('script-loader!uglify-loader!./js/mdb/rotating-cards.js');
require('script-loader!uglify-loader!./js/mdb/buttons.js');
require('script-loader!uglify-loader!./js/mdb/hammer.js');
require('script-loader!uglify-loader!./js/mdb/jquery.hammer.js');
require('script-loader!uglify-loader!./js/mdb/sidenav.js');
require('script-loader!uglify-loader!./js/mdb/collapsible.js');
require('script-loader!uglify-loader!./js/mdb/jquery.easypiechart.js');
require('script-loader!uglify-loader!./js/mdb/panel-popuot.js');
require('script-loader!uglify-loader!./js/mdb/forms.js');
require('script-loader!uglify-loader!./js/mdb/picker.js');
require('script-loader!uglify-loader!./js/mdb/picker-date.js');
require('script-loader!uglify-loader!./js/mdb/picker-time.js');
require('script-loader!uglify-loader!./js/mdb/lightbox.js');
require('script-loader!uglify-loader!./js/mdb/jquery.jsticky.js');
require('script-loader!uglify-loader!./js/mdb/scrollbar.js');
require('script-loader!uglify-loader!./js/mdb/animations.js');
require('script-loader!uglify-loader!./js/mdb/chips.js');
require('script-loader!uglify-loader!./js/mdb/autocomplete.js');
I also use uglify-loader on each to minimize the output, but it's not necessary. The script-loader module is very basic. It makes the code in the given file act like it was wrapped in <script></script> tags. In webpack.config.js:
    entry: {
        app: './client/index.js'
    },
    output: {
        path: './build',
        filename: '[name].js'
    }
This will put all of the required Bootstrap/MDB files into your app.js file. Works like a charm! I even use it to upgrade files individually, like chart.js -- which is on version 2.5+, while the MDB version is still 1.x.

DDiran pro commented 5 years ago

Awesome! I'm guessing you also just "require" the CSS files also within your index.js?

jkilbride commented 5 years ago

Yes. But I use the sass / scss files, so: require(‘./css/_main.scss’); I use the main file to import all my others. I also use the extract-text-webpack-plugin in my webpack config.

DDiran pro commented 5 years ago

Thanks - Although I gotta say I'm really struggling to get this working with webpack. I use Yarn for package management and I noticed that the MDB team have actually put out an MDB Free package. I was wondering whether they also have an MDB Pro version? Or perhaps an easy way to add the Pro files to the free package? @Adrian Sawicki any ideas? Thanks

lifestar pro answered 5 years ago

And for Lightbox... run yarn add photoswipe open modules(optional)/lightbox.js remove ALL above var initPhotoSwipeFromDOM = function (gallerySelector) { add it to the beginning of the file
import PhotoSwipe from 'photoswipe';
import PhotoSwipeUI_Default from 'photoswipe/dist/photoswipe-ui-default.js';
and use just like this import './js/modules/lightbox';

Doug Kent answered 5 years ago

Really would like to have webpack support!

Doug Kent answered 5 years ago

I think I have a reasonable solution working with webpack, as follows. First, I separately install the required versions of jquery, node-waves, popper.js and bootstrap. Then, in the JavaScript, I import the above, along with mdbootstrap: import "jquery"; import "popper.js"; import "node-waves"; import "bootstrap"; import "mdbootstrap"; In webpack.config.js, this helps: new ProvidePlugin({ '$': 'jquery', 'jQuery': 'jquery', 'window.jQuery': 'jquery', 'Popper': 'popper.js', 'Waves': 'node-waves' }) Webpack pretty much takes care of the rest, as usual.

Doug Kent commented 5 years ago

(Took me about a day to finally arrive at that solution ^^^^ )

lifestar pro answered 5 years ago

Please do support Webpack. Without this it is impossible to use modules like wow.js and more

lifestar pro answered 5 years ago

For use some MDB modules with Webpack. waves.js remove from bottom ` Waves.attach('.btn, .btn-floating', ['waves-light']); Waves.attach('.view .mask', ['waves-light']); Waves.attach('.waves-light', ['waves-light']); Waves.attach('.navbar-nav a, .nav-icons li a, .navbar form, .nav-tabs .nav-item', ['waves-light']); Waves.attach('.navbar-brand', ['waves-light']); Waves.attach('.pager li a', ['waves-light']); Waves.attach('.pagination .page-item .page-link', ['waves-effect']); Waves.init();` and use like this
import Waves from './js/modules/waves';
Waves.attach('.btn, .btn-floating', ['waves-light']);
Waves.init();
wow.js in last line change }).call(this); to }).call(window);

Andreas Ek pro answered 5 years ago

How about the WebPack support? A modern webpage of today uses WebPack as default. Struggling with the WOW-package in MDB-pro :-(
Hello Brisbushwalkers, Webpack support is still in MDB's TODO list. As Michał Szymański mentioned earlier:
Because MDB is based on Bootstrap and jQuery, composing React with MDB you should proceed the same way as you would do composing it with Bootstrap or jQUery.
Regards
Have opted to use and customise react-toolbox instead.
Hello , It's really great that you found a solution. We will be working on the integration of MDB and Webpack in the future. Regards
Thank you for providing a solution which can help many other people.

mark-steven-au pro premium answered 2 years ago

Having issues with web pack as well.Is there a way to use both MDB and web pack now given this post is 3 years old?


Grzegorz Bujański staff commented 2 years ago

Hi. Look at here: https://mdbootstrap.com/support/jquery/latest-version-of-mdb-not-compatible-with-webpack/


mark-steven-au pro premium commented 2 years ago

Hi Grzegorz, Took the link and it happily built a working platform. However only realised at the end that that is a jQuery version not a React version which is what this thread is about (Hello I am evaluating MDB for use with a nonprofit website. I am building the website using react, and packaging using webpack)

So again is there a way to add Web Pack etc to MBD React Pro that works as so far I have not managed to achieve a working platform. Thanks Mark


mark-steven-au pro premium commented 2 years ago

Hi Grzegorz, Took the link and it happily built a working platform. However only realised at the end that that is a jQuery version not a React version which is what this thread is about (Hello I am evaluating MDB for use with a nonprofit website. I am building the website using react, and packaging using webpack)

So again is there a way to add Web Pack etc to MBD React Pro that works as so far I have not managed to achieve a working platform. Thanks Mark


Grzegorz Bujański staff commented 2 years ago

I understand you want to use jQuery MDB in the react project?


mark-steven-au pro premium commented 2 years ago

No sorry. Was trying to add WebPack to existing MDB React project as was trying to use a different Video player as the MDB one is not working correctly (see other support issue)This video player uses Webpack so hence was wanting to add Webpack to see if I could find a way around the issue.


Grzegorz Bujański staff commented 2 years ago

Note that this thread is for MDB jQuery. You are looking for a completely different solution. I'm not a react specialist, so I suggest you set up a new thread in the MDB react forum, they will be able to help you.


mark-steven-au pro premium commented 2 years ago

Ah OK the site has bounced me to jQuery during a search no doubt. thanks for that did not notice.


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: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags