Issue with MDB Pro 4.8.2 and Webpack 4.33

Bartłomiej Malanowski staff pro premium commented 6 years ago

Could you please show us some code? How can we reproduce this issue?

Joe Yong commented 6 years ago

Create a new project with MDB Pro 4.8.2, and use Webpack 4.33. Create Typescript file main.ts with code - "use strict";

import * as $ from "jquery"; import 'popper.js/dist/umd/popper.min.js'; import 'bootstrap/dist/js/bootstrap.min.js'; import 'mdbootstrap-pro/js/mdb.min.js';

$(document).ready(function () {

// MDB Date Picker Initialization
$('.datepicker').pickadate(
    {
        selectYears: 200
    }
);

});

Webpack configuration as below - var path = require('path'); var webpack = require('webpack'); const CleanWebpackPlugin = require('clean-webpack-plugin'); const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = function (env) {

env = env || {};
var isProd = env.NODE_ENV === 'production';

var appMode;
if (isProd) {
    appMode = 'production';
}
else {
    appMode = 'development';
}

let pathsToClean = [
    //'dist/*.*',
    'dist/css/*.*',
    'dist/js/*.*'
];

// the clean options to use
let cleanOptions = {
    root: path.join(__dirname, 'wwwroot'),
    verbose: true,
    dry: false
};

// Setup base config for all environments
var config = {
    entry: {
        // We could use either js or ts files           
        main: './src/ts/main.ts'            
    },

    mode: appMode,

    optimization: {
        minimizer: [
            new UglifyJsPlugin({
                cache: true,
                parallel: true,
                sourceMap: false
            })
        ],

        splitChunks: {
            cacheGroups: {
                common: {
                    name: 'common',
                    chunks: 'all',
                    minChunks: 2
                }
            }
        }
    },

    output: {
        path: path.join(__dirname, 'wwwroot/dist'),
        filename: './js/[name].[chunkhash].bundle.js'
    },

    devtool: 'source-map',
    resolve: {
        extensions: ['.ts', '.tsx', '.js', '.jsx']
    },

    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.$': 'jquery',
            'window.jQuery': 'jquery',
            Waves: 'node-waves'
        }),
        new CleanWebpackPlugin(pathsToClean, cleanOptions),
        new MiniCssExtractPlugin({
            filename: "./css/[name].[contenthash].bundle.css",
            chunkFilename: "./css/[name].[contenthash].bundle.css"
        }),
        new OptimizeCssAssetsPlugin({})
    ],

    module: {
        rules: [
            {
                test: /\.(png|jpg|gif|jpeg|woff|woff2|eot|ttf|svg)(\?|$)/,
                //use: 'url-loader?limit=100000'
                use: [{
                    loader: 'url-loader?limit=100000',
                    options: {
                        // Combine with the css
                        name: '[name].[ext]'
                    }
                }]
            },
            {
                test: /\.tsx?$/,
                loader: "ts-loader"
            },
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader"
                ]
            },
            {
                test: /\.scss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    "sass-loader"
                ]
            }
        ]
    }
};

// Alter config for prod environment
if (isProd) {
    config.devtool = 'none';
}

return config;

};

Error when using MDB Pro 4.8.2. No error with 4.7.7.