Topic: MDB pro 4.10 + webpack4 not working
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: '$'
}]
}
]
}
};
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Open
- User: 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
Grzegorz Bujański staff commented 5 years ago
Hi. Let's continue the conversation here: https://mdbootstrap.com/support/jquery/javascript-error-at-project-launch/