Topic: data-mdb-color-picker-init is not working, in webpack configuration
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.)
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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 7.0.0
- Device: Laptop
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: No