materialize: Bug when used with AMD (require.js)

@lmadrilejos How about my solution? If it’s hard for you to modify them, check out my forked and modified version: https://github.com/ccloli/materialize/tree/AMD-fix/dist/js

@ZiperRom1 I’ve noticed that Materialize was updated earlier today, but then I almost forgot it, sorry for not updating in time, I’ll updated it ASAP (about 2 hours later) 😃 AFAIK, I guess the reason why Materialize doesn’t support AMD is that some libraries like hammer has already assigned itself as AMD modules, and Materialize concat all the libraries into one single materialize.js. So if we use Materialize as AMD module directly, it may have errors. So here are two solutions: assign all the libraries as single AMD modules (max1011 solution); remove the AMD assigned code of each libraries (my solution). Hope this can help you.😃

@ccloli HI, thanks very much, I tried doing it earlier today and it works now, thanks for the solution 😃, you’re a life saver. thanks again… 😃

I’m using the latest Materialize (0.97.5) with curl.js (AMD), then I tried using $(...).sideNav() and occurred an error dragTarget.hammer is not a function.

Luckily, I deleted some lines of define and it works fine now. Here are my steps (with offical 0.97.5, not the unoffical-AMD version):

(Notice that on minify version, some variables will probably be modified)

1 . Delete this part at Line 232:

"object"==typeof module&&"object"==typeof module.exports?module.exports=e():"function"==typeof define&&define.amd?define(e):
// minify version
"object"==typeof module&&"object"==typeof module.exports?module.exports=a():"function"==typeof define&&define.amd?define(a):

2 . Delete this part at Line 234:

typeof define==g&&define.amd?define(function(){return hc}):"undefined"!=typeof module&&module.exports?module.exports=hc:
// minify version
typeof define==ka&&define.amd?define(function(){return ea}):"undefined"!=typeof module&&module.exports?module.exports=ea:

3 . Delete Line 235~239, 241:

    if (typeof define === 'function' && define.amd) {
        define(['jquery', 'hammerjs'], factory);
    } else if (typeof exports === 'object') {
        factory(require('jquery'), require('hammerjs'));
    } else {
        factory(jQuery, Hammer); // DON'T delete this line
    }
// minify version
"function"==typeof define&&define.amd?define(["jquery","hammerjs"],a):"object"==typeof exports?a(require("jquery"),require("hammerjs")):

4 . Add this part to show waves (see https://github.com/Dogfalo/materialize/issues/634#issuecomment-154833830) :

require(['jquery']).next(['materialize'], function(Materialize){
    Waves.displayEffect();
});

Update on Mar 13, 2016: I’m sorry that some parts of code is copied from materialize.min.js, and their variables are not the same as unminified version. Now they have been fixed.

I am also running into similar issues when trying to load materialize. I tried to follow the suggestions above but in the version that I downloaded from the Materialize site (v0.95.3) it seems as though Hammer, Velocity, Scrollfire, etc… have been merged into a single materialize.js file so I don’t think that I can reference them independently in requireJS definition. I am seeing the following errors when attempting to use materialize and also noticing that the UI loads but does not fully function (JS based features are not working).

Errors

• ReferenceError: scrollFire is not defined
• Error: Mismatched anonymous define() module: function ($, Hammer) {…

My RequireJS Definition File

requirejs.config({
    paths: {
        'text' : '../lib/require/text',
        'durandal' :'../lib/durandal/js',
        'plugins' : '../lib/durandal/js/plugins',
        'transitions' : '../lib/durandal/js/transitions',
        'knockout' : '../lib/knockout/knockout-3.1.0',
        'jquery' : '../lib/jquery/jquery-2.1.3',
        'materialize' : '../lib/materialize/js/materialize'
    },
    shim: {
        'materialize': {
            deps: ['jquery']
        },
        'jquery': {
            exports: '$'
        }
    }
});