Full Browserify Support

[faridnsh]

Right now there's no easy way to load materialize with browserify.

[carloscarcamo]

I'm using browserify with materialize in my project and it works great! If you are using npm to install materialize then just require materialize as if you were using a node.js module (Note: this should works, but I haven't used it in this way.).

...
require('materialize-css');
...

Another way is using bower to install materialize, this is the way I'm using it, but you need to use browserify-shim. I'm using grunt to automate some tasks and also using grunt-browserify.

This is how I'm using materialize with browserify: My package.json looks like this:

{
  "name": "myapp",
  "version": "0.0.1",
  "devDependencies": {
    "bower": "^1.4.0",
    "browserify": "~5.10.1",
    "browserify-shim": "^3.8.1",
    "grunt": "^0.4.5",
    "grunt-bower-clean": "^0.2.2",
    "grunt-bower-task": "^0.4.0",
    "grunt-browserify": "^3.2.1",
    "grunt-contrib-clean": "^0.6.0",
    "grunt-contrib-cssmin": "^0.10.0",
    "grunt-contrib-sass": "^0.8.1",
    "grunt-contrib-uglify": "^0.6.0"
  },
  "dependencies": {
   //some deps
  },
  "browser": {
    "jquery": "./bower_components/jquery/dist/jquery.min.js",
    "materialize": "./bower_components/materialize/dist/js/materialize.min.js"
  },
  "browserify-shim": {
    "jquery": "$",
    "materialize": "materialize"
  },
  "browserify": {
    "transform": [
      "browserify-shim"
    ]
  }
}

pay attention to "browser": { ... }, "browserify-shim": { ... } and `"browserify": { ... }

My js file in ./public/src/js/main.js looks like

var $ = require('jquery');
require('materialize');
...

And lastly my Gruntfile.js looks like:

module.exports = function(grunt){
  grunt.initConfig({
    pkg : grunt.file.readJSON('package.json'),
    bower : { //bower tasks },
    browserify : {
      app : {
        files : {
          './public/dist/js/main.js' : ['./public/src/js/main.js']
        }
      }
    },
    ... 
  });

  grunt.loadNpmTasks('grunt-bower-task');
  grunt.loadNpmTasks('grunt-browserify');
  grunt.loadNpmTasks('grunt-bower-clean');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-cssmin');

  grunt.registerTask('default', ['bower:install', 'browserify', 'uglify', 'cssmin']);
};

Then just do $ grunt or $ grunt browserify and insert the script on your project:

...
<script src="./public/dist/js/main.js"></script>
...

Then materialize should be working, hope this helps :)

[cryptiklemur]

require('materialize-css');

is not working for me :/

[cryptiklemur]

browserify-shim does though

[carloscarcamo]

require('materialize-css'); It will only include the *.js file from materialize, you will still need to include the css file by your own on your project.

[cryptiklemur]

Yes, i know. require('materialize-css'); was throwing errors, when trying to browserify without the shim

[StrikeForceZero]

@carloscarcamo do you have a sample repo of this in action? I keep getting "Materialized is not defined" even with the specified browserify config above

[carloscarcamo]

@StrikeForceZero unfortunately I don't have a open source project with this configuration, but if you want, you can share your repo and I can help you to get it works.

[StrikeForceZero]

@carloscarcamo thanks for the offer, I just figured it out. seems it didn't like the bower component. using the npm module "materialize-css" worked. I also noticed, I had to rename the shim to prevent conflicts with npm/bower component having the same name and being loaded without the shim.

"browserify": {
    "transform": [
      "browserify-shim"
    ]
  },
  "browser": {
    "angular": "./bower_components/angular/angular.js",
    "jquery": "./bower_components/jquery/dist/jquery.js",
    "materialize-js": "./node_modules/materialize-css/bin/materialize.js"
  },
  "browserify-shim": {
    "angular": "angular",
    "jquery": "$",
    "materialize-js": {
      "exports": "Materialize",
      "depends": [
        "jquery:jQuery"
      ]
    }
  },

and then in my main.js

require('materilize-js');

not exactly the way I would like it but it appears its working. trying to use https://github.com/krescruz/angular-materialize instead of https://github.com/angular/material/tree/v0.9.8 because materializecss uses way better css practices IMO than the angular port.

[weblee]

On the same subject this worked for me.

{
  "private": true,
  "browser": {
    "jquery": "./node_modules/jquery/dist/jquery.min.js",
    "materialize": "./node_modules/materialize-css/bin/materialize.js"
  },
  "browserify": {
    "transform": [
      "browserify-shim"
    ]
  },
  "browserify-shim": {
    "jquery": "$",
    "materialize": "materialize"
  },
  "devDependencies": {
    "gulp": "^3.8.8",
    "laravel-elixir": "^2.0.0",
    "vue": "^0.12.1",
    "jquery": "^2.1.4",
    "browserify": "^10.2.4",
    "browserify-shim": "^3.8.9",
    "materialize-sass": "^0.95.2",
    "materialize-css": "^0.96.1"
  },
  "dependencies": {}
}

In code

var $ = require('jquery');
require('materialize');

// Do my stuff

Im using this for a Laravel App, Hope it helps someone...

[oberoivarun]

@weblee Hey! I was trying to setup a laravel app too. Could you explain how to use elixir with this?

[weblee]

@oberoivarun My gulp file is like this

var elixir = require('laravel-elixir');

elixir(function(mix) {
    mix.sass( ['app.scss'], 'public/assets/css')
        .copy('./node_modules/materialize-css/font', 'public/assets/fonts')
        .browserify('app.js', 'public/assets/js')
        .version(["public/assets/css/app.css", "public/assets/js/app.js"]);
});

Then in app.js you can use it like so.

var Vue = require('vue');
var $ = require('jquery');
require('materialize');

module.exports = function() {
    $('select').material_select();
}

Hope it helps..

[oberoivarun]

@weblee Many thanks! A few questions.

1. I am not using vue, nor do i know how to.. is that line necessary?
2. How is the materialize sass getting referenced and then compiled?
3. How is the browserify-shim transformation getting used? (From your package.json)
4. And finally, what does this do?

Sorry, i am very new to this. Thanks for teaching!

[oberoivarun]

@weblee Got it working! Added this line! Would still love to know the answers to the rest.

elixir.config.js.browserify.transformers.push({ name: 'browserify-shim', options: {}});

*From Laracasts. @JeffreyWay

Thanks.

[rogue780]

@weblee, @oberoivarun how are you avoiding this issue? https://github.com/Dogfalo/materialize/issues/1422

[weblee]

@oberoivarun

1, You dont have to use Vue. Was just in my example of requiring other modules. 2, For sass im using the below in my app.scss. I am pulling in materialize-sass package

@import "./node_modules/materialize-sass/sass/materialize.scss";

3, Please read up on shim https://github.com/thlorenz/browserify-shim 4, Exporting my module

@rogue780 Using browserfiy-shim , read above.

[oberoivarun]

@rogue780 Materialize is not completely compatible with browserify-shim either. There as to be some tweaking to be done to split the js and sass. Maybe one of the future versions will come which are easier to handle.

[littlebigbot]

@StrikeForceZero that worked for me, thanks so much.

[tomscholz]

Closed due inactivity. Feel free to reopen it, if it's still necessary.

[alexiusp]

do you know how to make it work with ES6 style 'import'?

I have Materialize in global scope but when I try to call toaster for example it says Vel is not a function, so not all parts of Materialize sources were loaded.