Topic: data-mdb-color-picker-init is not working, in webpack configuration

coregenion priority asked 10 months ago


I have installed MDB Pro using webpack and like this:

// MDB
import * as mdb from 'mdb-ui-kit/js/mdb.umd.min.js';
window.mdb = mdb;
import mdbPlugins from 'mdb-ui-kit/plugins/js/all.min.js';
window.mdbPlugins = mdbPlugins;

The npm build is successful without any errors.

I can render it by using the API like: $('.color-picker').colorPicker(); This works fine

What I am doing wrong?

Expected behavior

I should see the Color picker rendered by just using <div class="color-picker" data-mdb-color-picker-init></div>

Actual behavior

Instead, I get Uncaught ReferenceError: mdb is not defined

Resources (screenshots, code snippets etc.)


Grzegorz Bujański staff answered 10 months ago


Imports are always performed before the rest of the code. . Plugins need access to mdb, but since window.mdb = mdb will be performed after plugin import, this error occurs.

You can solve this in a simple way. Create two additional files. E.g. mdb.js and plugins.js and add the appropriate imports to them:

main.js:

import './mdb';
import './plugins';

mdb.js

import * as mdb from 'mdb-ui-kit/js/mdb.umd.min.js';
window.mdb = mdb;

plugins.js

import * as plugins from 'mdb-ui-kit/plugins/js/all.min.js'; // lib
window.plugins = plugins;

After that the color picker should start working.



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 7.0.0
  • Device: Laptop
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: Yes
  • Provided link: No