Topic: MDB pro 4.10 + webpack4 not working

Kiril free asked 4 years ago


I've followed the tutorial how to use WebPack with MDB Pro. WebPack runs fine, no errors. When I start the project MDB doesn't work and in the console I get the error below. I've tried all kind of settings with babel without success. If I use mdb.js independently from the WebPack bundle, it runs fine. I don't have a choice to use WebPack it is required by our company to use it, so I'm stuck and can't use the package. ============ error from concole ================ mdb.min.js:52 Uncaught TypeError: Cannot assign to read only property 'exports' of object '#' at Object. (mdb.min.js:52) at Object../node_modules/mdbootstrap-pro/js/mdb.min.js (mdb.min.js:52) at i (mdb.min.js:25) at Module. (mdb.min.js:68) at i (mdb.min.js:25) at Object../node_modules/mdbootstrap-pro/js/mdb.min.js (mdb.min.js:47) at i (mdb.min.js:25) at mdb.min.js:25 at Object. (mdb.min.js:25) at Object../node_modules/mdbootstrap-pro/js/mdb.min.js (dev.bundle.js?v=z7j8EBq0VL3Ys_tfx3H6ghxsN8zinpEaVLOnBzuXHGA:38690)

Webpack.config

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
var webpack = require('webpack');

module.exports = {

entry: [
    './wwwroot/src/js/ImportModule.js',
    './wwwroot/src/js/App.js',
    './wwwroot/src/less/Vendors.css',
    './wwwroot/src/less/Site.less'

],
plugins: [


    new MiniCssExtractPlugin({
        filename: "css/site.css"
    }),
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.$': 'jquery',
        'window.jQuery': 'jquery',
        Waves: 'node-waves'
    }),
    new CopyWebpackPlugin([
        {
            from: '**/*',
            to: 'mdb-addons',
            context: path.resolve(__dirname, 'src', 'lib', 'mdb', 'mdb-addons'),
        },
    ])

],
module: {
    rules: [
        {
            test: /\.js$/,
            exclude: [/node_modules/, /lib/],
             use: [
                'babel-loader',
                {
                    loader: 'eslint-loader',
                    options: {
                        fix: true,
                    },
                },
            ],
        },

        {
            test: /\.(css|less)$/,
            use: [
                MiniCssExtractPlugin.loader,
                "css-loader",
                {
                    loader: "less-loader",
                    options: {
                        modifyVars: require('./wwwroot/Src/js/GlobalNav'),//Importation des variables globales paratgées par less, Javascript et Core
                        javascriptEnabled:true
                    }
                }
            ]
        },

        {
            test: /\.(ttf|eot|woff|woff2|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
            use: {
                loader: "file-loader",
                options: {
                    name: "/css/fonts/[name].[ext]",
                },
            },
        },
        {
            test: /\.(png|jpg)$/,
            use: {
                loader: "file-loader",
                options: {
                    name: "/images/[name].[ext]",
                },
            },
        },
        {
            test: require.resolve('jquery'),
            use: [{
                loader: 'expose-loader',
                options: 'jQuery'
            }, {
                loader: 'expose-loader',
                options: '$'
            }]
        }

    ]
}

};

Grzegorz Bujański staff commented 4 years ago

Hi. Let's continue the conversation here: https://mdbootstrap.com/support/jquery/javascript-error-at-project-launch/



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Opened

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.10.0
  • Device: Desktop
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No