Latest version of MDB not compatible with Webpack

@nonayerbiz I use this config:

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  context: __dirname,
  mode: 'development',
  entry: {
    'bootstrapCSS': path.resolve(__dirname, './src/jq-pro/css/bootstrap.css'),
    'jquery': path.resolve(__dirname, './src/jq-pro/js/jquery.js'),
    'popper': path.resolve(__dirname, './src/jq-pro/js/popper.js'),
    'bootstrapJS': path.resolve(__dirname, './src/jq-pro/js/bootstrap.js'),
    'mdb': [path.resolve(__dirname, './src/jq-pro/scss/mdb-pro.scss'), path.resolve(__dirname, './src/jq-pro/js/mdb.js')],
    'main': [path.resolve(__dirname, './src/app.js'), path.resolve(__dirname, './src/styles.scss')]
  },
  devtool: 'cheap-eval-source-map',
  devServer: {
    inline: true
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: '[name].min.js'
  },
  resolve: {
    alias: {
      'jquery': path.resolve(__dirname, './src/jq-pro/js/jquery.js'),
      'popper.js': path.resolve(__dirname, './src/jq-pro/js/popper.js')
    }
  },
  plugins: [
    new HtmlWebpackPlugin({
        filename: 'index.html', //relative to root of the application
        template: path.resolve(__dirname, './src/index.html')
    }),
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader'
      },
      {
        test: /\.mjs$/,
        include: /node_modules/,
        type: 'javascript/auto'
      },
      {
        test: /\.(ico|jpg|jpeg|png|gif|svg)(\?.*)?$/,
        use: {
          loader: 'file-loader',
          options: {
            name: '[path][name].[ext]',
            context: 'src'
          }
        }
      },
      {
        test: /\.(eot|otf|webp|ttf|woff|woff2)(\?.*)?$/,
        use: {
          loader: 'file-loader',
          options: {
            name: '[path][name].[ext]',
          }
        }
      },
      {
        test: /\.s?css$/i,
        use: ['style-loader', 'css-loader', 'sass-loader']
      }
    ]
  },
  externals: {
    'chart.js': 'chart',
    'datatables.net': 'datatables.net',
    'desandro-matches-selector': 'desandro-matches-selector',
    'ev-emitter': 'ev-emitter',
    'fizzy-ui-utils': 'fizzy-ui-utils',
    'get-size': 'get-size',
    'outlayer': 'outlayer',
    './item': 'item',
    'clipboard': 'clipboard',
    'PerfectScrollbar': 'PerfectScrollbar',
  }
};

.babelrc

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "corejs": "3.0.0"
      }
    ]
  ],
}

Since Im working on a full Laravel app and I don't want to modify the folder structure here is my entire config.

It is working fine except for toastr and date/time picker, both of them are undefined for some reason I can't figure out. I have already tried importing them in the mdb.js file

The trick to make it work was to create a additional mdb.js file like on the boilerplate shared by @Arnt Oddvar Pedersen instead of importing the already built mdb.js file in the node_modules folder

webpack.mix.js

const mix = require('laravel-mix');

mix
    .js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

resources/js/app.js

require('./bootstrap');
require('./mdb');

resources/js/bootstrap.js

try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');
    window.tippy = require('tippy.js/dist/tippy-bundle.umd.js');

    require('bootstrap');
    require('chart.js');
    require('datatables.net');
} catch (e) {}

resources/js/mdb.js

import 'mdbootstrap-pro/src/js/free/forms-free';
import 'mdbootstrap-pro/src/js/free/scrolling-navbar';
import 'mdbootstrap-pro/src/js/free/treeview';
import 'mdbootstrap-pro/src/js/free/wow';
import 'mdbootstrap-pro/src/js/pro/buttons';
import 'mdbootstrap-pro/src/js/pro/cards';
import 'mdbootstrap-pro/src/js/pro/character-counter';
import 'mdbootstrap-pro/src/js/pro/chips';
import 'mdbootstrap-pro/src/js/pro/collapsible';
import 'mdbootstrap-pro/src/js/pro/dropdown/dropdown';
import 'mdbootstrap-pro/src/js/pro/dropdown/dropdown-searchable';
import 'mdbootstrap-pro/src/js/pro/file-input';
import 'mdbootstrap-pro/src/js/pro/material-select/material-select';
import 'mdbootstrap-pro/src/js/pro/material-select/material-select-view';
import 'mdbootstrap-pro/src/js/pro/material-select/material-select-view-renderer';
import 'mdbootstrap-pro/src/js/pro/mdb-autocomplete';
import 'mdbootstrap-pro/src/js/pro/preloading';
import 'mdbootstrap-pro/src/js/pro/range-input';
import 'mdbootstrap-pro/src/js/pro/sidenav';
import 'mdbootstrap-pro/src/js/pro/smooth-scroll';
import 'mdbootstrap-pro/src/js/pro/sticky';
import 'mdbootstrap-pro/src/js/vendor/addons-pro/chat';
import 'mdbootstrap-pro/src/js/vendor/addons-pro/multi-range';
import 'mdbootstrap-pro/src/js/vendor/addons-pro/simple-charts';
import 'mdbootstrap-pro/src/js/vendor/addons-pro/steppers';
import 'mdbootstrap-pro/src/js/vendor/addons-pro/timeline';
import 'mdbootstrap-pro/src/js/vendor/addons/datatables';
import 'mdbootstrap-pro/src/js/vendor/addons/datatables-select';
import 'mdbootstrap-pro/src/js/vendor/addons/datatables-select2';
import 'mdbootstrap-pro/src/js/vendor/addons/datatables2';
import 'mdbootstrap-pro/src/js/vendor/addons/imagesloaded.pkgd.min';
import 'mdbootstrap-pro/src/js/vendor/addons/jquery.zmd.hierarchical-display';
import 'mdbootstrap-pro/src/js/vendor/addons/masonry.pkgd.min';
import 'mdbootstrap-pro/src/js/vendor/addons/rating';
import 'mdbootstrap-pro/src/js/vendor/free/chart';
import 'mdbootstrap-pro/src/js/vendor/free/chartjs-datalabels';
import 'mdbootstrap-pro/src/js/vendor/free/enhanced-modals';
import 'mdbootstrap-pro/src/js/vendor/free/jquery.easing';
import 'mdbootstrap-pro/src/js/vendor/free/velocity';
import 'mdbootstrap-pro/src/js/vendor/free/waves';
import 'mdbootstrap-pro/src/js/vendor/pro/jarallax';
import 'mdbootstrap-pro/src/js/vendor/pro/jarallax-video';
import 'mdbootstrap-pro/src/js/vendor/pro/jquery.sticky';
import 'mdbootstrap-pro/src/js/vendor/pro/lightbox';
import 'mdbootstrap-pro/src/js/vendor/pro/ofi';
import 'mdbootstrap-pro/src/js/vendor/pro/scrollbar';
import 'mdbootstrap-pro/src/js/vendor/pro/scrolling-navbar';
import 'mdbootstrap-pro/src/js/vendor/pro/toastr';
import 'mdbootstrap-pro/src/js/vendor/pro/vector-map';
import 'mdbootstrap-pro/src/js/vendor/pro/vector-map-world-mill';

global.bsCustomFileInput = require('mdbootstrap-pro/src/js/vendor/free/bs-custom-file-input');

This is how my scrips commands look (unmodified)

"scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "npm run development -- --watch",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},

import 'mdbootstrap-pro/src/js/vendor/pro/toastr';

window.toastr = require ('mdbootstrap-pro/src/js/vendor/pro/toastr');

resolve: {
    alias: {
        picker: "mdbootstrap-pro/src/js/pro/picker",
    }
}

mix.webpackConfig({
    resolve: {
        alias: {
            picker: "mdbootstrap-pro/src/js/pro/picker",
        }
    }
})

I've essentially come up with an alternative solution to installing MDBootstrap as a NPM package that allow you to freely use any kind of package bundler and transpiler of choice.

https://gist.github.com/SpellCraft/0173a3921a1454a7184178c9da60b363

This gist contains:

• Webpack v4 configuration file (I use this currently in production)
• package.json (minimal install with Webpack, Babel, ESLint, AirBNB style-guide and prettier)
• ESLint rules
• Prettier rules
• Babel v7 configuration
• Starter SCSS file to get FontAwesome5 Free & MDB Free/Pro to work as a NPM module

Basically, Webpack doesn't like the way MDB has exported their files, so re-building it (like seen in mdb.js in the gist) makes everything work again.

So far I've tested most of the javascript and components of the MDB Pro package without any issues.

This sounds great!

Anyhow the gist is not available under the link you provided: https://gist.github.com/SpellCraft/0173a3921a1454a7184178c9da60b363 Can you please share it again? I have been struggling with this setup for so long!

Best, Grischa

How should I implement this into laravel-mix?

Hello! I did a quick google-search as I haven't used Laravel-mix at all, but it looks like Laravel-mix is doing the exact same thing as the webpack.conf.js file from the mdb-boilerplate repository, though they provide their own methods.

To make Laravel-mix work with the current setup, you could simply create a new webpack configuration file named webpack.mix.js with the following content:

const mix = require('laravel-mix');

mix
  .js('src/js/vendor/main.js', 'dist/js')
  .js('src/js/app.js', 'dist/js')
  .sass('src/scss/vendor/main.scss', 'dist/css')
  .sass('src/scss/app.scss', 'dist/css');

Then, append the following switch to all the script commands in package.json:

--config=webpack.mix.js

The script commands should look like this now:

"scripts": {
  "start": "webpack-dev-server --mode development --progress --color --config=webpack.mix.js",
  "dev": "webpack-dev-server --mode development --progress --color --config=webpack.mix.js",
  "prod": "webpack --mode production --config=webpack.mix.js",
  "build": "webpack --mode production --config=webpack.mix.js"
},

I'm still working on updating the README.md of the mdb-boilerplate repository, giving it some much needed T.L.C., but I hope my experimental configuration above works out for you. Do note that I haven't tested this out myself, but from reading the online documentation, this is all that you need and the changes that you need to make for it to work.

If it works out for ya, I'd appreciate some feedback so I can include this into the updated README file!