Webpack: Cannot assign to read only property 'exports' of object '#<Object>'

Question

While I was compiling code from Material Design Booststrap through Webpack, I encountered this problem in the Google Chrome console:

Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

The files that was used by Webpack to bundle the code:

vendor.js

require('mdbootstrap-pro/css/mdb.css');

require('mdbootstrap');
require('mdbootstrap-pro');
require('jquery');
require('popper.js');

Along with jQuery and Popper, the codes in mdbootstrap is similar to the official Bootstrap releases

webpack.vendor.js

var webpack = require('webpack');

let path = require('path');
let MiniCssExtractPlugin = require('mini-css-extract-plugin');
let TerserJSPlugin = require('terser-webpack-plugin');
let OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = (env = {}, argv) => {
  return {
    node: {
      fs: 'empty',
      chart: 'empty',
      child_process: 'empty',
      net: 'empty',
      tls: 'empty',
    },

    entry: {
      'vendor': ['./vendor.js'],
    },

    output: {
      path: path.resolve(__dirname, 'static', 'bundle'),
      filename: 'vendor.bundle.js',
    },

    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            MiniCssExtractPlugin.loader,
            'css-loader',
          ]
        },
        {
          test: /\.(jpg|jpeg|png|woff|woff2|eot|ttf|svg|gif)$/,
          loader: 'url-loader',
        }
      ],
    },

    plugins: [
      new MiniCssExtractPlugin({
        filename: 'vendor.bundle.css',
      }),

      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        Popper: ['popper.js', 'default'],
      })
    ],

    optimization: {
      minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
    },
  };
};

package.json

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
    "url-loader": "^3.0.0",
    "webpack": "^4.41.4",
    "webpack-cli": "^3.3.10"
  },
  "dependencies": {
    "babel-loader": "^8.0.6",
    "bootstrap": "^4.4.1",
    "chart.js": "^2.9.3",
    "css-loader": "^3.4.0",
    "enhanced-resolve": "^4.1.1",
    "file-loader": "^5.0.2",
    "jquery": "^3.4.1",
    "loadash": "^1.0.0",
    "lodash": "^4.17.15",
    "mdbootstrap": "^4.11.0",
    "mdbootstrap-pro": "git+https://oauth2:[email protected]/mdb/jquery/jq-pro.git",
    "mini-css-extract-plugin": "^0.9.0",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "popper.js": "^1.16.0",
    "resolve-url-loader": "^3.1.1",
    "sass-loader": "^8.0.0",
    "svg-loader": "0.0.2"
  }
}

As a matter of fact, I looked upon different forums in Github about this problem and all of them basically suggests these things and none of these worked:

• use require instead of import as import cannot be used with module.exports
• add sourceType: 'unambiguous' to the configuration file

  • Invalid configuration object. Configuration has an unknown property 'sourceType'
    

Any help(s) are really appreciated.