1. MDB Home Page
  2. Support Main Page
  3. MDB Standard
Topic: Webpack CUSTOM MDB UI KIT PRO ADVANCED

gdw96 free asked 3 years 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:

<span class="tag"><link</span><span class="pln"> </span><span class="atn">rel</span><span class="pun">=</span><span class="atv">"stylesheet"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"css/index.min.css"</span><span class="pln"> </span><span class="tag">/></span><span class="pln">
</span><span class="tag"><script</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/javascript"</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"js/index.min.js"</span><span class="tag">></script></span>

With:

<span class="tag"><link</span><span class="pln"> </span><span class="atn">rel</span><span class="pun">=</span><span class="atv">"stylesheet"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"css/mdb.min.css"</span><span class="pln"> </span><span class="tag">/></span><span class="pln">
</span><span class="tag"><script</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/javascript"</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"js/mdb.min.js"</span><span class="tag">></script></span>

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:

<span class="pln">npm i </span><span class="lit">@popperjs</span><span class="pun">/</span><span class="pln">core
npm install chart</span><span class="pun">.</span><span class="pln">js chartjs</span><span class="pun">-</span><span class="pln">plugin</span><span class="pun">-</span><span class="pln">datalabels detect</span><span class="pun">-</span><span class="pln">autofill perfect</span><span class="pun">-</span><span class="pln">scrollbar</span>

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

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

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

Do you have an idea?

Thanks

gdw96 free answered 3 years ago

How to make a custom version of MDB UI KIT Pro Advanced;

EDIT : Since the 3.0.0 branch of mdb-webpack-starter all this configuration is no longer necessary.

Because of @Grzegorz Bujański here is the answer :

In first, clone mdb-webpack-starter like this : gh repo clone mdbootstrap/mdb-webpack-starter (with Github CLI tool) or git clone https://github.com/mdbootstrap/mdb-webpack-starter.git.In the new mdb-webpack-starter folder run npm install, then remove mdb-ui-kit free with npm remove mdb-ui-kit and run npm i git+https://oauth2:MY_SECRET_TOKEN@git.mdbootstrap.com/mdb/standard/mdb-ui-kit-pro-advanced.

Now, change, if you want, the browser compatibility configuration in ./browserslistrc and run npx browserslist@latest --update-db (run this even if you not edit browserslistrc).

Run npm getMDBsrc to get a copy of mdb-ui-kit sources and install dependencies like this :

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

Now, we have to change webpack configuration, well, in webpack.config.mdb.dev.js add mdb folder to module rules:

module: {
    [...]
    rules: [
      {
        test: /\.js$/,
        include: [
          Path.resolve(__dirname, '../src'),
          Path.resolve(__dirname, '../mdb'), // Add
        ],
        enforce: 'pre',
        loader: 'eslint-loader',
        options: {
          emitWarning: true,
        },
      },
      {
        test: /\.js$/,
        include: [
          Path.resolve(__dirname, '../src'),
          Path.resolve(__dirname, '../mdb'), // Add
        ],
        loader: 'babel-loader',
      },
    ],
  },
  [...]

In .eslintrc add "ignorePatterns": ["mdb"], before "extends": ["airbnb-base", "plugin:prettier/recommended"],

Delete Webpack.ProvidePlugin in webpack.common.mdb.js :

new Webpack.ProvidePlugin({ 
    'mdb': 'mdb',
}), //delete this

Now, we have to change the imports is scss, js and html :

In ./src/scss/index.scss change the content by (for import all content or choose what you want) : @import '../../mdb/mdb/scss/mdb.pro.scss';

In ./src/js/index.js change the content by (choose the modules you want) :

import {
    Button,
    Collapse,
    Carousel,
    Popover,
    ScrollSpy,
    Tab,
    Tooltip,
    Input,
    Dropdown,
    Ripple,
    Range,
    Animate,
    Chart,
    Lightbox,
    Rating,
    Sidenav,
    Alert,
    Toast,
    Timepicker,
    Navbar,
    InfiniteScroll,
    LazyLoad,
    Datepicker,
    Popconfirm,
    Datatable,
    Stepper,
    Sticky,
    Select,
    Touch,
    SmoothScroll,
    PerfectScrollbar,
    Loading,
    Autocomplete,
    Modal,
    Clipboard,
    ChipsInput,
    MultiRangeSlider,
} from '../../mdb/mdb/js/mdb.pro';
import Dummy from '../../mdb/plugins/dummy/js/dummy'; // The plugins you want. Dont forget to import relative scss if necessary (not for Dummy).

export {
    // FREE
    Button,
    Carousel,
    Collapse,
    Dropdown,
    Input,
    Modal,
    Popover,
    ScrollSpy,
    Ripple,
    Tab,
    Tooltip,
    Range,
    // PRO
    Alert,
    Animate,
    Chart,
    Datepicker,
    Datatable,
    Lightbox,
    Navbar,
    Popconfirm,
    Rating,
    Sidenav,
    SmoothScroll,
    Timepicker,
    Toast,
    InfiniteScroll,
    LazyLoad,
    Stepper,
    Sticky,
    Select,
    Touch,
    PerfectScrollbar,
    Loading,
    Autocomplete,
    Clipboard,
    ChipsInput,
    MultiRangeSlider,
    // PLUGINS
    Dummy,      // Dont forget the export
};

In ./src/index.html change <link rel="stylesheet" href="css/index.min.css" /> by <link rel="stylesheet" href="css/mdb.min.css" /> and <script type="text/javascript" src="js/index.min.js"></script> by <script type="text/javascript" src="js/mdb.min.js"></script>.

Well, you're ready to develop! Run npm rum startMDB to start dev server and npm run buildMDB to build!Easy

I hope I haven't forgotten anything.

PS: If you want to rename the library with your own name change library: 'yourLibraryName', and change 'mdb': Path.join(__dirname, '../node_modules/mdb-ui-kit'), to 'mdb': 'yourLibraryName' in webpack.common.mdb.js.

PPS: Add html file. In webpack.common.mdb.js add :

  new CopyWebpackPlugin([
    { from: Path.resolve(__dirname, '../src/index.html') },
    { from: Path.resolve(__dirname, '../src/another.html') }, // Another file
    { from: Path.resolve(__dirname, '../src/img'), to: 'img' },
  ]),

Grzegorz Bujański staff answered 3 years ago

Unfortunately, the webpack starter was not prepared for PRO packages, only FREE, which requires a few changes in the project configuration.

In webpack.config.mdb.dev.js add mdb folder to module rules: 

module: {
        rules: [
          {
            test: /\.js$/,
            include: [
              Path.resolve(__dirname, '../src'),
              Path.resolve(__dirname, '../mdb'),
            ],
            enforce: 'pre',
            loader: 'eslint-loader',
            options: {
              emitWarning: true,
            },
          },
          {
            test: /\.js$/,
            include: [
              Path.resolve(__dirname, '../src'),
              Path.resolve(__dirname, '../mdb'),
            ],
            loader: 'babel-loader',
          },
        ],
      },

In .eslintrc add "ignorePatterns": ["mdb"],

If you want to rename the library with your own name change library: 'yourLibraryName', and alias 'mdb': 'yourLibraryName' in webpack.common.mdb.js

Delete Webpack.ProvidePlugin in webpack.common.mdb.js :

   new Webpack.ProvidePlugin({
      'mdb': 'mdb',
    }), //delete this

Let me know if this solution solved your problem.

gdw96 free commented 3 years ago

@Grzegorz Bujański Great, It works ! Thanks a lot.Just one thing, I dont understand where add alias 'mdb': 'yourLibraryName' in webpack.common.mdb.js.

I'll make a post to detail procedure.

Grzegorz Bujański staff commented 3 years ago

In this line: https://github.com/mdbootstrap/mdb-webpack-starter/blob/cd24bb98574916ee625d541c58382b96cf4e97d5/webpack/webpack.common.mdb.js#L36 change 'mdb': Path.join(__dirname, '../node_modules/mdb-ui-kit'), to 'mdb': 'yourLibraryName'

gdw96 free commented 3 years ago

@Grzegorz Bujański Thanks a lot

Grzegorz Bujański staff commented 3 years ago

you're welcome :)

gdw96 free answered 3 years 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

Grzegorz Bujański staff answered 3 years 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:

  • run npm remove mdb-ui-kit to remove free version
  • run npm i git+https://oauth2:MY_TOKEN@git.mdbootstrap.com/mdb/standard/mdb-ui-kit-pro-advanced to install MDB Advanced

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

gdw96 free commented 3 years 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 3 years ago

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

gdw96 free commented 3 years 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.

Lelouch Britannia free answered 3 years ago

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 free commented 3 years 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 free commented 3 years 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 free commented 3 years 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 free commented 3 years 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 free commented 3 years ago

@Lelouch Britannia Thank's a lot

gdw96 free answered 3 years 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 free commented 3 years ago

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

gdw96 free commented 3 years ago

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

Lelouch Britannia free answered 3 years ago

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

Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

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

Resolved

Specification of the issue
  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: 3.2.0
  • Device: Any
  • Browser: Any
  • OS: Any
  • Provided sample code: Yes
  • Provided link: No
Tags
webpack custom-mdb-ui-kit-pro-advanced mdb-ui-kit-pro-advanced custom-mdb-ui-kit
About author
gdw96
85Support score
10Questions 3Answers 3Snippets