Webpack Support ETA?

Topic: Webpack Support ETA?

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.

Add comment

jkilbride answered 8 years ago

3 0 Best answer

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 7 years ago

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

jkilbride commented 7 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 7 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

Add comment

lifestar pro answered 8 years ago

2 0 Best answer

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';

Add comment

Doug Kent answered 7 years ago

2 0 Best answer

Really would like to have webpack support!

Add comment

Doug Kent answered 7 years ago

2 0 Best answer

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 7 years ago

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

Add comment

lifestar pro answered 8 years ago

1 0 Best answer

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

Add comment

lifestar pro answered 8 years ago

1 0 Best answer

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

Add comment

Andreas Ek pro answered 7 years ago

1 0 Best answer

How about the WebPack support? A modern webpage of today uses WebPack as default. Struggling with the WOW-package in MDB-pro :-(

Add comment

Adrian Sawicki answered 8 years ago

0 0 Best answer

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

Add comment

brisbushwalkers answered 8 years ago

0 0 Best answer

Have opted to use and customise react-toolbox instead.

Add comment

Adrian Sawicki answered 8 years ago

0 0 Best answer

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

Add comment

Adrian Sawicki answered 8 years ago

0 0 Best answer

Thank you for providing a solution which can help many other people.

Add comment

mark-steven-au pro premium answered 5 years ago

0 0 Best answer

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 5 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 5 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 5 years ago

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 5 years ago

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

mark-steven-au pro premium commented 5 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 5 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 5 years ago

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

Add comment

Write

Create snippet

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

brisbushwalkers

12Support score
1Questions 1Answers

0Snippets likes 0Snippets