Webpack CUSTOM MDB UI KIT PRO


Topic: Webpack CUSTOM MDB UI KIT PRO

gdw96 pro priority asked 2 weeks ago

Hello,

I would like, with mdb-webpack-starter, to make a custom version of MDB UI KIT Pro Advanced as in the mdb-webpack-starter documentation.

Here is what I did and the result I get:

I started by cloning mdb-webpack-starter like this:

gh repo clone mdbootstrap/mdb-webpack-starter (GitHub CLI)

Then in "./mdb-webpack-starter" I did:

npm install

Then I installed the pro advanced version of mdb "mdb-ui-kit-pro-advanced" like this:

npm i git+https://oauth2:MY_ACCESS_TOKEN@git.mdbootstrap.com/mdb/standard/mdb-ui-kit-pro-advanced

Then I did (like in the webpack-starter-pack documentation):

npm run getMDBsrc

As indicated, I copy the content of "./mdb/mdb/scss/mdb.pro.scss" into "./src/scss/index.scss" (as my version is the "advanced" one the folder structure is different, in "./mdb" I don't have directly "./mdb/scss" and "./mdb/js" but "./mdb/mdb/scss" and in "./mdb/mdb/js". I also have "./mdb/plugins").Then I update the import paths.

I do the same for "./mdb/mdb/js/mdb.pro.js" in "./src/js/index.js" and I update the import paths.

And finally, I modify "./src/index.html" by replacing:

<link rel="stylesheet" href="css/index.min.css" />
<script type="text/javascript" src="js/index.min.js"></script>

With:

<link rel="stylesheet" href="css/mdb.min.css" />
<script type="text/javascript" src="js/mdb.min.js"></script>

Now I start the server with the command "npm run startMDB".

And there, I have errors that import not found. To correct this, I reinstall them:

npm i @popperjs/core
npm install chart.js chartjs-plugin-datalabels detect-autofill perfect-scrollbar

I restart the server: "npm run startMDB" and I get the following errors:

ERROR in ./mdb/mdb/js/pro/timepicker/index.js 1762:31
Module parse failed: Unexpected token (1762:31)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   }
|
>   _toggleBackgroundColorCircle = (classes) => {
|     const tips = this._modal.querySelector(`.${classes}.${ACTIVE_CLASS}`) !== null;
|
@ ./src/js/index.js 22:0-57 41:0-43:269

ERROR in ./mdb/mdb/js/pro/chips/index.js 346:21
Module parse failed: Unexpected token (346:21)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   }
|
>   _handleChangeInput = ({ target }) => {
|     if (this.allChips.length + 1 > 0) {
|       Manipulator.addClass(target, CLASSNAME_ACTIVE);
@ ./src/js/index.js 39:0-58 41:0-43:269
Child HtmlWebpackCompiler:
    1 asset
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] 2.02 KiB {HtmlWebpackPlugin_0} [built]
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/postcss-loader/src/index.js!node_modules/sass-loader/dist/cjs.js!src/scss/index.scss:
    Entrypoint mini-css-extract-plugin = *
    [./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src/index.js!./node_modules/sass-loader/dist/cjs.js!./src/scss/index.scss] ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./node_modules/sass-loader/dist/cjs.js!./src/scss/index.scss 390 KiB {mini-css-extract-plugin} [built]
    [./node_modules/css-loader/dist/runtime/api.js] 2.46 KiB {mini-css-extract-plugin} [built]
i 「wdm」: Failed to compile.

Do you have an idea?

Thanks


Grzegorz Bujański staff answered a week ago

I checked it and I was able to easily use the webpack starter with the advanced package. I only had to do 2 things:

Other things remain unchanged. The imports in index.js and index.scss do not need to be changed.


gdw96 pro priority commented a week ago

@Grzegorz Bujański "Other things remain unchanged. The imports in index.js and index.scss do not need to be changed." Thank's but, how can I make a custom version, how can I build it if I don't change the imports?

The problem is not to use mdb-webpack-starter with mdb-ui-kit-pro-advanced. The problem is that I want a custom version of MDB UI KIT (like in the mdb-webpack-starter documentation), change variables (like breakpoints and colors, etc.). Then, build my version and use it in my project.

And that's what doesn't work (well, it works for CSS, not for JS).

I used npm run getMDBsrc as in the documentation, but the directory structure is different between mdb-ui-kit-pro-essential and mdb-ui-kit-pro-advanced.

In mdb-ui-kit-pro-essential, there are the directories ./src/js and ./src/css. While in mdb-ui-kit-pro-advanced, in ./src/ there are the directories ./mdb (with js and css in it) and ./plugins.

So the structure of the ./mdb directory created with the npm run getMDBsrc command is different from the documentation (it is, for example, ./mdb/mdb/js instead of ./mdb/js), as I explained. So I have adapted the documentation to my case. And that's where I get errors (with JS files), that's why I make this post.


Grzegorz Bujański staff commented a week ago

Okay, I got it. Sorry for the misunderstanding. The solution proposed by @Lelouch Britannia works for you and solves your problem?


gdw96 pro priority commented a week ago

Thanks

I managed to use mdb-webpack-starter and make a custom version of mdb-ui-kit but only on CSS. But on JavaScript, I still have errors when I import some modules like "timepicker" and "chips" such as indicated errors.


can u show ur package.json maybe i can help u


gdw96 pro priority answered a week ago

@Lelouch Britannia

Here is my package.json as you requested:

{
    "name": "mdb-webpack-starter",
    "version": "2.1.0",
    "scripts": {
        "start": "cross-env NODE_ENV=development webpack-dev-server --config webpack/webpack.config.dev.js --open",
        "startMDB": "cross-env NODE_ENV=development webpack-dev-server --config webpack/webpack.config.mdb.dev.js --open",
        "build": "cross-env NODE_ENV=production webpack --config webpack/webpack.config.prod.js --colors",
        "buildMDB": "cross-env NODE_ENV=production webpack --config webpack/webpack.config.mdb.prod.js --colors",
        "getMDBsrc": "node getMDBsrc",
        "test": "jest",
        "lint": "lint-staged && pretty-quick --staged"
    },
    "husky": {
        "hooks": {
            "pre-commit": "lint-staged && pretty-quick --staged && jest"
        }
    },
    "lint-staged": {
        "src/**/*.js": [
            "eslint --fix"
        ],
        "src/**/*.css": [
            "stylelint --fix"
        ]
    },
    "repository": {
        "type": "git",
        "url": "https://github.com/mdbootstrap/mdb-webpack-starter"
    },
    "keywords": [
        "material design",
        "bootstrap",
        "webpack"
    ],
    "author": "M.Smolenski <m.smolenski@mdbootstrap.com>",
    "license": "MIT",
    "devDependencies": {
        "@babel/core": "^7.9.0",
        "@babel/plugin-proposal-class-properties": "^7.8.3",
        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
        "@babel/polyfill": "^7.8.7",
        "@babel/preset-env": "^7.9.5",
        "autoprefixer": "^9.7.6",
        "babel-eslint": "^10.1.0",
        "babel-loader": "^8.1.0",
        "clean-webpack-plugin": "^3.0.0",
        "copy-webpack-plugin": "^5.1.1",
        "core-js": "^3.8.1",
        "cross-env": "^7.0.2",
        "css-loader": "^3.5.2",
        "eslint": "^6.8.0",
        "eslint-config-airbnb-base": "^14.1.0",
        "eslint-config-prettier": "^6.11.0",
        "eslint-loader": "^3.0.3",
        "eslint-plugin-import": "^2.20.2",
        "eslint-plugin-prettier": "^3.1.3",
        "file-loader": "^5.1.0",
        "fs-extra": "^9.0.1",
        "html-webpack-plugin": "^4.3.0",
        "husky": "^4.2.5",
        "jest": "^26.0.1",
        "lint-staged": "^10.2.4",
        "mini-css-extract-plugin": "^0.9.0",
        "optimize-css-assets-webpack-plugin": "^5.0.3",
        "postcss-loader": "^3.0.0",
        "prettier": "^2.0.5",
        "pretty-quick": "^2.0.1",
        "sass": "^1.30.0",
        "sass-loader": "^8.0.2",
        "style-loader": "^1.2.1",
        "stylelint": "^13.5.0",
        "stylelint-config-prettier": "^8.0.1",
        "stylelint-config-recommended": "^3.0.0",
        "stylelint-config-recommended-scss": "^4.2.0",
        "stylelint-config-standard": "^20.0.0",
        "stylelint-order": "^4.1.0",
        "stylelint-prettier": "^1.1.2",
        "stylelint-scss": "^3.17.2",
        "uglifyjs-webpack-plugin": "^2.2.0",
        "webpack": "^4.43.0",
        "webpack-cli": "^3.3.12",
        "webpack-dev-server": "^3.11.0",
        "webpack-fix-style-only-entries": "^0.5.1",
        "webpack-merge": "^4.2.2"
    },
    "dependencies": {
        "@popperjs/core": "^2.6.0",
        "chart.js": "^2.9.4",
        "chartjs-plugin-datalabels": "^0.7.0",
        "detect-autofill": "^1.1.3",
        "mdb-ui-kit": "git+https://oauth2:MY_ACCESS_TOKEN@git.mdbootstrap.com/mdb/standard/mdb-ui-kit-pro-advanced",
        "perfect-scrollbar": "^1.5.0"
    }
}

Thank's


Lelouch Britannia commented a week ago

hidde ur token bro :) ; "mdb-ui-kit": "git+https://oauth2:**@git.mdbootstrap.com/mdb/standard/mdb-ui-kit-pro-advanced"


gdw96 pro priority commented a week ago

@Lelouch Britannia Oh damn! I always take care usually. It is no longer valid anyway.


i tested PRO ADV 3.0.0 and it's working Screen (just for js )

webpack.common.mdb.js

 const Path = require('path');
const Webpack = require('webpack');
const FixStyleOnlyEntriesPlugin = require('webpack-fix-style-only-entries');

module.exports = {
  entry: {
    'js/mdb': Path.resolve(__dirname, '../src/js/index.js'),
  },
  output: {
    library: 'hlx',
    libraryTarget: 'umd',
    globalObject: 'this',
    umdNamedDefine: true,
    path: Path.join(__dirname, '../dist'),
    filename: '[name].min.js',
  },
  resolve: {
    alias: {
      '~': Path.resolve(__dirname, '../src'),
    },
  },
  module: {
    rules: [
      {
        test: /\.mjs$/,
        include: /node_modules/,
        type: 'javascript/auto',
      }
    ],
  },
};

webpack.config.mdb.prod.js

const Webpack = require('webpack');
const merge = require('webpack-merge');
const common = require('./webpack.common.mdb.js');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = merge(common, {
  mode: 'production',
  devtool: 'source-map',
  stats: 'errors-only',
  bail: true,
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        sourceMap: true,
      })
    ],
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
    ],
  },
});

gdw96 pro priority commented a week ago

@Lelouch Britannia Thank's. Have you modified webpack.common.mdb.js and webpack.config.mdb.prod.js? Because mine are different, there are more things.


Lelouch Britannia commented a week ago

yes i changed it :)
This code looking ur source code index orginal config ;

resolve: { alias: { '~': Path.resolve(_dirname, '../src'), 'mdb': Path.join(_dirname, '../node_modules/mdb-ui-kit'), }, },

changed;

resolve: { alias: { '~': Path.resolve(__dirname, '../src'), }, },


gdw96 pro priority commented a week ago

Here is my webpack.common.mdb.js :

const Path = require('path');
const Webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const FixStyleOnlyEntriesPlugin = require('webpack-fix-style-only-entries');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    entry: {
        'js/mdb': Path.resolve(__dirname, '../src/js/index.js'),
        'css/mdb': Path.resolve(__dirname, '../src/scss/index.scss'),
    },
    output: {
        library: 'mdb',
        libraryTarget: 'umd',
        globalObject: 'this',
        umdNamedDefine: true,
        path: Path.join(__dirname, '../dist'),
        filename: '[name].min.js',
    },
    plugins: [
        new Webpack.ProvidePlugin({
            'mdb': 'mdb',
        }),
        new CopyWebpackPlugin([{
                from: Path.resolve(__dirname, '../src/index.html')
            },
            {
                from: Path.resolve(__dirname, '../src/img'),
                to: 'img'
            },
        ]),
        new FixStyleOnlyEntriesPlugin(),
        new MiniCssExtractPlugin({
            filename: '[name].min.css',
        }),
    ],
    resolve: {
        alias: {
            '~': Path.resolve(__dirname, '../src'),
            'mdb': Path.join(__dirname, '../node_modules/mdb-ui-kit'),
        },
    },
    module: {
        rules: [{
                test: /\.mjs$/,
                include: /node_modules/,
                type: 'javascript/auto',
            },
            {
                test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
                use: {
                    loader: 'file-loader',
                    options: {
                        name: '[path][name].[ext]',
                    },
                },
            },
            {
                test: /\.s?css/i,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader'],
            },
        ],
    },
};

Here is my webpack.config.mdb.prod.js :

const Webpack = require('webpack');
const merge = require('webpack-merge');
const common = require('./webpack.common.mdb.js');
const {
    CleanWebpackPlugin
} = require('clean-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = merge(common, {
    mode: 'production',
    devtool: 'source-map',
    stats: 'errors-only',
    bail: true,
    optimization: {
        minimizer: [
            new UglifyJsPlugin({
                cache: true,
                parallel: true,
                sourceMap: true,
            }),
            new OptimizeCSSAssetsPlugin({
                cssProcessorOptions: {
                    map: {
                        inline: false,
                    },
                },
            }),
        ],
    },
    plugins: [
        new CleanWebpackPlugin(),
        new Webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('production'),
        }),
        new Webpack.optimize.ModuleConcatenationPlugin(),
    ],
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            use: 'babel-loader',
        }, ],
    },
});

And I just need to modify resolve: { alias: { [...] }, }, ?


Lelouch Britannia commented a week ago

copy js & scss folders in > ./node_modules/mdb-ui-kit/src/mdb/ after paste in ./src/ modify entry from webpack.common.mdb.js for this config npm run buildMDB

entry: { 'js/mdb': Path.resolve(_dirname, '../src/js/mdb.pro.js'), 'css/mdb': Path.resolve(_dirname, '../src/scss/mdb.pro.scss'), },


gdw96 pro priority commented a week ago

@Lelouch Britannia Thank's a lot


gdw96 pro priority answered 4 hours ago

@Grzegorz Bujański

Hello,

As long as I didn't need to change the Javascript everything was fine, I was content with the SCSS. Except that now, I need to modify the JS.

So in ./src/js/index.js, I import :import * as mdb from '../../mdb/mdb/js/mdb.pro.

I run the command: npm run startMDB and here are the same errors again (and I NEED a solution please) :

ERROR in ./mdb/mdb/js/pro/timepicker/index.js 1762:31
Module parse failed: Unexpected token (1762:31)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   }
|
>   _toggleBackgroundColorCircle = (classes) => {
|     const tips = this._modal.querySelector(`.${classes}.${ACTIVE_CLASS}`) !== null;
|
@ ./mdb/mdb/js/mdb.pro.js 24:0-42 44:0-84:2
@ ./src/js/index.js

ERROR in ./mdb/mdb/js/pro/chips/index.js 392:19
Module parse failed: Unexpected token (392:19)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   }
|
>   _handleBlurInput = ({ target }) => {
|     if (target.value.length > 0) {
|       this._handleCreateChip(target, target.value);
@ ./mdb/mdb/js/mdb.pro.js 41:0-43 44:0-84:2
@ ./src/js/index.js

Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB 5
  • MDB Version: 3.0.0
  • Device: PC
  • Browser: Firefox
  • OS: Windows
  • Provided sample code: No
  • Provided link: No