Can't import materialize modules with webpack

Question

Trying to use materializecss with webpack. What I want to do is to import only the required Modules not all of the js. Loading the complete js is working as expected. But if I only want to use a modal, I cant find out how to do it. I tried

    import 'materialize-css/js/modal.js';

result: Uncaught ReferenceError: cash is not defined Then I tried:

   import 'materialize-css/js/cash.js';
   import 'materialize-css/js/component.js';
   import 'materialize-css/js/global.js';
   import 'materialize-css/js/anime.min.js';
   import 'materialize-css/js/modal.js';

Result: modal.js:24 Uncaught ReferenceError: Component is not defined.

I wonder if there is a way to use materializecss in a modular way with webpack?

Many Thanks in advance

Answer 1

This is what I ended up doing:

import {
    Modal,
    Dropdown
} from 'materialize-css';

document.addEventListener('DOMContentLoaded', function () {
    var modals = M.Modal.init(document.querySelectorAll('.modal'), {});
    var dropdowns = M.Dropdown.init(document.querySelectorAll('.dropdown-trigger'), {});
});

Import the components you want to use and initialize them individually.