Issue with MDB Pro 4.8.2 and Webpack 4.33


Topic: Issue with MDB Pro 4.8.2 and Webpack 4.33

Joe Yong asked 3 years ago

Expected behavior Updated MDB Pro from 4.7.7 to 4.8.2. Everything was running fine with Webpack 4.33. Update from 4.7.7 to 4.8.2 should not break the code

Actual behavior Error when loading the compiled JS - Uncaught ReferenceError: bsCustomFileInput is not defined at HTMLDocument. (mdb.min.js:1) (anonymous) @ mdb.min.js:1

Resources (screenshots, code snippets etc.) No code change, just updated the version from 4.7.7 to 4.8.2. Puzzled what broke?


Bartłomiej Malanowski staff pro premium commented 3 years ago

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


Joe Yong commented 3 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.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Open

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.8.0
  • Device: Computer
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No