Use Materialize as modular components

[geosigno]

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.

[acburst]

You can take a look at our Gruntfile to get a better sense of how we are compiling things. But in general, you should import in this order:

'js/cash.js',
'js/component.js',
'js/global.js',
'js/anime.min.js',

[geosigno]

Still having the issue

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';

$(document).ready(function() {
$('.modal').modal();
});

This error:

app.js:14686 Uncaught ReferenceError: Component is not defined
at app.js:14686
at Object._defaults.alignment (app.js:14940)
at __webpack_require__ (app.js:20)
at Object.<anonymous> (app.js:13164)
at __webpack_require__ (app.js:20)
at Object.defineProperty.value (app.js:10475)
at __webpack_require__ (app.js:20)

[geosigno]

I use Webpack to bundle the JS, maybe the issue is linked to this?

I tried to import all modules such this:

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/collapsible.js';
import 'materialize-css/js/dropdown.js';
import 'materialize-css/js/modal.js';
import 'materialize-css/js/materialbox.js';
import 'materialize-css/js/parallax.js';
import 'materialize-css/js/tabs.js';
import 'materialize-css/js/tooltip.js';
import 'materialize-css/js/waves.js';
import 'materialize-css/js/toasts.js';
import 'materialize-css/js/sidenav.js';
import 'materialize-css/js/scrollspy.js';
import 'materialize-css/js/autocomplete.js';
import 'materialize-css/js/forms.js';
import 'materialize-css/js/slider.js';
import 'materialize-css/js/cards.js';
import 'materialize-css/js/chips.js';
import 'materialize-css/js/pushpin.js';
import 'materialize-css/js/buttons.js';
import 'materialize-css/js/datepicker.js';
import 'materialize-css/js/timepicker.js';
import 'materialize-css/js/characterCounter.js';
import 'materialize-css/js/carousel.js';
import 'materialize-css/js/tapTarget.js';
import 'materialize-css/js/select.js';
import 'materialize-css/js/range.js';

I get the same issue.. only the following code work correctly:

import 'materialize-css/';

but this is very heavy to use only the modal.

[eboye]

Same here, except I can't do

import 'materialize-css/';

then it says jquery is not defined O_o

[geosigno]

Did you import jQuery, something as follow:

window.$ = window.jQuery = require('jquery');

[eboye]

@geosenna no, I've tried

import $ from 'jquery';

and also

import jQuery from 'jquery';

but didn't work. Moved to gulp for now as this project I'm working on needs to be done fast 😠

[geosigno]

@acburst any idea?

[MaikelGG]

@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.

[geosigno]

I have done what you said, but I get the same error.

app.js:17024 Uncaught ReferenceError: Component is not defined
    at app.js:17024
    at Object.<anonymous> (app.js:17384)
    at __webpack_require__ (app.js:20)
    at Object.<anonymous> (app.js:10845)
    at __webpack_require__ (app.js:20)
    at Object.defineProperty.value (app.js:10477)
    at __webpack_require__ (app.js:20)
    at Object._slice (app.js:12803)
    at __webpack_require__ (app.js:20)
    at Object.ua (app.js:10920)

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

And I modify the Component.js file itself from materialize.

[MaikelGG]

You need to move 'import Component from 'materialize-css/js/component.js';' to modal.js

[geosigno]

Actually this this the content of the modal.js file, not my source bundle.

[geosigno]

any though @acburst ?

I still have the same issue:

Uncaught ReferenceError: Component is not defined

at
class Modal extends Component {

[geosigno]

I am really struggling with this... Is anyone succeed to using both Webpack and Materialize Modal?

[eboye]

I haven't been able to use it as modules, but I've managed to make it work with webpack (the RC version). Here's the app.js:

// noinspection JSLint
import jQuery from "jquery"; // jshint ignore:line
// noinspection JSLint
window.$ = window.jQuery = jQuery;
// noinspection JSLint
import * as M from "materialize-css"; // jshint ignore:line

document.addEventListener('DOMContentLoaded', function () {
  // noinspection JSLint
  'use strict';
  // noinspection JSUnresolvedVariable
  M.Sidenav.init(document.querySelectorAll('.sidenav'), {
    edge: 'right'
  });
  M.Collapsible.init(document.querySelectorAll('.collapsible'), {
    accordion: false
  });
  if (document.querySelectorAll('.parallax').length) {
    M.Parallax.init(document.querySelectorAll('.parallax'), {
      responsiveThreshold: 0
    });
  }
  if (document.querySelectorAll('.tooltipped').length) {
    M.Tooltip.init(document.querySelectorAll('.tooltipped'));
  }
});

Here's the package.json:

{
  "private": true,
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development webpack --progress --hide-modules --config build/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production webpack --progress --hide-modules --config build/webpack.config.js",
    "watch": "npm run development -- --watch && webpack-dev-server --progress --colors"
  },
  "dependencies": {
    "jquery": "^3.3.1",
    "materialize-css": "^1.0.0-rc.2"
  },
  "devDependencies": {
    "autoprefixer": "^8.2.0",
    "babel-core": "^6.24.1",
    "babel-loader": "^7.1.0",
    "babel-preset-env": "^1.3.3",
    "browser-sync": "^2.18.8",
    "browser-sync-webpack-plugin": "^2.2.2",
    "clean-webpack-plugin": "^0.1.16",
    "copy-webpack-plugin": "^4.0.1",
    "cross-env": "^5.0.1",
    "css-loader": "^0.28.0",
    "dotenv": "^5.0.1",
    "eslint": "^4.10.0",
    "eslint-loader": "^2.0.0",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.11",
    "imagemin-jpeg-recompress": "^5.1.0",
    "imagemin-webpack-plugin": "^2.1.0",
    "img-loader": "^2.0.0",
    "isdev": "^1.0.1",
    "node-sass": "^4.5.2",
    "postcss-loader": "^2.1.3",
    "sass-loader": "^6.0.3",
    "style-loader": "^0.20.3",
    "stylelint": "^9.1.3",
    "stylelint-webpack-plugin": "^0.10.3",
    "webpack": "~3.11.0",
    "webpack-cli": "^2.0.13",
    "webpack-dev-server": "^3.1.1",
    "webpack-merge": "^4.1.0"
  }
}

If anyone is interested, I can make a boilerplate od sorts that I'm using as there are some more config files.

[geosigno]

Yes me too, my issue is about using the modal as component because of this error:

Uncaught ReferenceError: Component is not defined