Use Materialize as modular components

Hi,

I have a lot of issue to have materialize working as modular component. I don’t want to have to load the entire JS library (almost 200KB) but only some components.

I was used to Foundation, which was working very simply. But with Materialize, everytime I want to add some component, it is long process to find which component need which dependency.

For example the Modal component

import 'materialize-css/js/modal';

Then I got the error Cash is not defined, so:

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

Then I got the Component is not defined, so again:

import 'materialize-css/js/component'; import 'materialize-css/js/cash'; import 'materialize-css/js/modal';

But here, I am still getting the issue.

I know several issues have already been reported, but none of them has been abe to help me so far…

Is there (probably) a better to achieve what I am trying to do?

I can’t find a dependency documentation, which will list all module interdependency. Is this plan?

Thanks.

[cristovaov]

@geosenna I have done the following and works:

• In component.js replace the first line with export default class Component {

in your modal file add at the top add: import Component from '../path-to/component';

In the source bundle (application.js in my app) I don’t import component.js again, only in the modal or whatever other ‘component’ you need to import it from there.

Hope this helps.

I’ve fixed my moduling problem with @MaikelGG 's answer (quoted here). I was having the Component is not defined error.

I’m using Webpack for bundling with babel-loader. I simply copied the component,js and sidenav.js from the node-modules folder to my assets/js folder, and made the changes there.Then it’s just importing them in my index.js file. I’ve used Materialize’s Gruntfile for the import order and loaded the equivalent babel plugins in Webpack as seen in their package.json. Sample config from my project:

> index.js:

import "materialize-css/js/cash";
import "./materialize-js/component";
import "materialize-css/js/global";
import "materialize-css/js/anime.min";
import "materialize-css/js/waves";
import "./materialize-js/sidenav";
import "materialize-css/js/forms";

> ./materialize-js/component:

1. export default class Component {

> ./materialize-js/sidenav:

1. import Component from "./component";

> webpack.config.js:

use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
            plugins: [
              "@babel/plugin-transform-arrow-functions",
              "@babel/plugin-transform-block-scoping",
              "@babel/plugin-transform-classes",
              "@babel/plugin-transform-template-literals",
              "@babel/plugin-transform-object-super"
            ]
          }
        }

> package.json (fyi)

"devDependencies": {
    "@babel/core": "^7.1.5",
    "@babel/preset-env": "^7.1.5",
    "babel-loader": "^8.0.4",
    "css-loader": "^1.0.1",
    "materialize-css": "^1.0.0",
    "mini-css-extract-plugin": "^0.4.4",
    "node-sass": "^4.10.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.0",
    "webpack": "^4.25.1",
    "webpack-cli": "^3.1.2"
  }

Haven’t encountered any errors so far. I hope my input is useful! Cheers ~

[bugy]

For those who want to import “modules”, without forking/copypasting original classes. As mentioned here: https://github.com/Dogfalo/materialize/issues/5958#issuecomment-397577854 all JS imports are working except class Component. Webpack is just excluding it from compilation

As a workaround, you can use ProvidePlugin and exports-loader plugin to fix it. In webpack configuration add the following plugin usage:

plugins: [new webpack.ProvidePlugin({Component: 'exports-loader?Component!materialize-css/js/component.js'})]

(if you want to read about the plugin, please check https://webpack.js.org/guides/shimming/#shimming-globals)

Works perfectly for me, and Component class is exported automatically everywhere.