Webpack Support ETA?

mark-steven-au premium answered 3 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 3 years ago

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

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

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

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

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

Add comment

Doug Kent free answered 6 years ago

2 0 Best answer

Please insert min. 20 characters.

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 free commented 6 years ago

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

Add comment

Doug Kent free answered 6 years ago

2 0 Best answer

Really would like to have webpack support!

Add comment

Andreas Ek pro answered 6 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 free answered 6 years ago

0 0 Best answer

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

Add comment

jkilbride free answered 6 years ago

3 0 Best answer

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

<pre><code>// 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');</code></pre>

I also use <code>uglify-loader</code> on each to minimize the output, but it's not necessary. The <code>script-loader</code> module is very basic. It makes the code in the given file act like it was wrapped in <code><script></script></code> tags. In <code>webpack.config.js</code>:

<pre><code>    entry: {
        app: './client/index.js'
    },
    output: {
        path: './build',
        filename: '[name].js'
    }</code></pre>

This will put all of the required Bootstrap/MDB files into your <code>app.js</code> file. Works like a charm! I even use it to upgrade files individually, like <code>chart.js</code> -- which is on version 2.5+, while the MDB version is still 1.x.

Please insert min. 20 characters.

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

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

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

Adrian Sawicki free answered 7 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

lifestar pro answered 7 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

lifestar pro answered 7 years ago

1 0 Best answer

Please insert min. 20 characters.

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

brisbushwalkers free answered 7 years ago

0 0 Best answer

Have opted to use and customise react-toolbox instead.

Add comment

lifestar pro answered 7 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

Adrian Sawicki free answered 7 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