Bug when used with AMD (require.js)

[max1011]

the company i am working with likes material design, so i told them about materialize, and they said ok use it , no problem , but currently i am stuck with this so please help !

when i try to require materialize , no errors are shown, but when i actually use it with jquery, it tells me that the method that i am trying to use on that element is undefined
here is my code (js):

requirejs.config({
  paths: {
    'materialize': '../../bower_components/materialize/dist/js/materialize',
    'jquery': '../../bower_components/jquery/dist/jquery'
  },
  shim: {
    'materialize': {
      deps: ['jquery']
    },
    'jquery': {
      exports: '$'
    }
  }
});

require(['jquery', 'materialize'], function($) {
  $('select').material_select();
});

Screen Shot:

[Dogfalo]

Currently there are some problems with using materialize + requirejs. We will look into this when we can.

[max1011]

i solved it on my own, there is an issue with the buttons, but other than that it works fine, i will post the fix soon

[Dogfalo]

Great, looking forward to seeing it.

[max1011]

@Dogfalo , I just fixed it all up it works 100% Love It, i want to ask you if i post this solution will i be one of the contributors on this project ??

[Dogfalo]

Yes if you make a pull request and we accept it.

[max1011]

OK I've got my code on a separate file, i will add it to the project itself and i'll make a pull request, so all what's left is to modify the source code, and hopefully you'll like it.

[max1011]

To fix this here is what your file should look like, @Dogfalo please add this to the documentation so that if there is anyone that uses require knows what to do and you certainely don't want to lose them

requirejs.config({
  paths: {
    'materialize': '../../bower_components/materialize/dist/js/materialize',
    'jquery': '../../bower_components/jquery/dist/jquery',
    'velocity': '../../bower_components/materialize/js/velocity.min',
    'hammerjs': '../../bower_components/materialize/js/hammer.min'
  },
  shim: {
    'materialize': {
      deps: ['jquery', 'hammerjs', 'velocity']
    }
  }
});


// Require both jquery and materialize (materialize will load other stuff that is needed)
require(['jquery', 'materialize'], function($) {

  $(function() {
    // Dom is ready
    // this is very important for some components like material_select

    // initialize some components (this is what i need, it can be anything)
    $('select').material_select();
    $(".button-collapse").sideNav();
    $('ul.tabs').tabs();

    // display the waves effect
    // waves is already loaded by materialize
    // just initialize it to make it work (if you don't it won't work)

  });

  // the dropdown is the first thing we need (and it doesn't load right away)
  // so we initialize it as soon as possible
  // if this causes an issue
  // move it to the "documnent ready" function
  $(".dropdown-button").dropdown();
});

Note: this code doesn't work with the current repo it will work after my pull request #653 is accepted

[SaidTayebi]

I'm using the configuration above but have this error when using a button or dropdown:
Uncaught ReferenceError: scrollFire is not defined

[max1011]

this of course was temporarily i am working on a permanent solution, for a simple fix in your case just add a path to scrollfire in require config paths like so (this was for me change it work with your paths config):

'scrollfire': '../../bower_components/materialize/js/scrollFire'

and then add it to the deps of materialize , if you have used the same code then it should look something like this

deps: ['jquery', 'hammerjs', 'velocity', 'scrollfire']

hope that helps @creatifDynamics !!

[SaidTayebi]

Thanks. I already figured this out and used it. Still, if I don't explicitly use scrollFire I don't expect an error about. I'll just wait for your fix because it's not blocking. Thank you !

[max1011]

your welcome @creatifDynamics , don't worry about the fix i have to do it because like i said i am working with a company and i have to fix it !!

[max1011]

hey @creatifDynamics , i had it fixed you can checkout my solution and try it out #794 , if it works please let me know , (Note that there is no need to load the dependencies just add jquery as a dep if needed)

[husterk]

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: '$'
        }
    }
});

[max1011]

Well check out this solution #794 and this will fix the issue, but it's not yet merged into master what you can do to fix temporarily is just load scrollfire as a dependency you can see that when i told creatifDynamics about it, so stick to that until the fix is merged into master

[husterk]

@max1011 - I downloaded HammerJS, VelocityJS, and the JQuery.ScrollFire plugin into my project and then referenced each of these libs in my RequireJS config definition. However, I am still seeing the exact same errors. I am somewhat new to using RequireJS and this is my first attempt to work with the Materialize UI framework so any guidance would be appreciated.

Updated RequireJS Configuration

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',
        'hammer' : '../lib/hammer/hammer.min',
        'velocity' : '../lib/velocity/velocity.min',
        'scrollFire' : '../lib/scrollfire/jquery.scrollfire.min'
    },
    shim: {
        'materialize': {
            deps: ['jquery', 'hammer', 'velocity', 'scrollFire']
        },
        'jquery': {
            exports: '$'
        }
    }
});

[max1011]

ok, so i inspected materialize a bit and it turns out that scrollfire is being generated on the wrong spot, meaning it's being used before it even exists so i changed the gruntfile to generate the new modified file and it seems to work, all of these changes are on my own fork #794, so please try out the new solution and tell me if it works @husterk
Note : use the materialize file in the bin directory not in the dist directory

[T00rk]

I had the same problem. I downloaded the version from your repository and that works.
Thanks a lot.
EDIT
Finally that doesn't work. I haven't had the error message again and my page did load, but that was just because meterialize.js wasn't included.

[SaidTayebi]

When are you guys planing to put it in master ?

[max1011]

Well, we need @Dogfalo to merge my repo into this one, so please @Dogfalo there you have people saying that my solution works ( i am one of them) so please merge!

[Dogfalo]

There was also a report that it didn't work
On Mar 9, 2015 1:34 PM, "max1011" [email protected] wrote:

Well, we need @Dogfalo https://github.com/Dogfalo to merge my repo into
this one, so please @Dogfalo https://github.com/Dogfalo there you have
people saying that my solution works ( i am one of them) so please merge!

—
Reply to this email directly or view it on GitHub
#634 (comment).

[max1011]

I fixed it like a few days ago!, it wasn't working but now it is

[max1011]

please everyone that have tried my newest updates to the fix and have it working or not working, comment out on the pull request #794 if it works or not if not tell us what is your problem!!

[max1011]

@T00rk what is your problem??, what is logged in the console??

[husterk]

I just tested out the changes from @max1011 and they worked for me. Thanks! Hopefully these changes will get merged in soon.

[T00rk]

I've got a "Load timeout for modules: materialize" or
scrollFire is not defined

It depends

[max1011]

There was a script error in one of the listed modules. If there is no script error in the browser's error console, and if you are using Firebug, try loading the page in another browser like Chrome or Safari. Sometimes script errors do not show up in Firebug.

[max1011]

@vaibhav93 for waves i mentioned this (how to make waves work if it's not already initialized) a lot if you search for it , you just first search for someone else who asked, i answered the question about it, anyways it good to know you figured it out

[dirkpennings]

When I'm reading this topic, is there a solution provided by the Materialize team already? Since the issue was created in February I was curious if I could easily use it with requirejs already.

[max1011]

@dirkpennings you can use my repo materialize-AMD, use the materialize.amd.js from the dist directory as 'Materialize', and require it normally,
for any errors you can fix it manually, or you can use the manual solution , there is no official amd version of materialize from materialize team, hope this helps

[dirkpennings]

@max1011 thanks for mentioning. How often are you planning to update that repo? Because the last commit was on July 14 and it currently uses materialize version 0.96.1 so that's of no use to me (because of some bug fixes in the more recent versions of materialize)

[max1011]

well, i will try to update it in the next few weeks , cause there is alot
of changes that i have to make, i think about two weeks or more is enough
unless i face a major issue, hope you get it

On Thu, Nov 26, 2015 at 11:17 PM, Dirk Pennings [email protected]
wrote:

@max1011 https://github.com/max1011 thanks for mentioning. How often
are you planning to update that repo? Because the last commit was on July
14 and it currently uses materialize version 0.96.1 so that's of no use to
me (because of some bug fixes in the more recent versions of materialize)

—
Reply to this email directly or view it on GitHub
#634 (comment)
.

[FabioNgo]

sorry, is the latest version of materialize css supported requirejs ?

[max1011]

The offical materialize css repo doesn't support require js, but you can
see we are all working to fix it and using our own solutions with some
workarounds, hope it helps

On Thursday, December 17, 2015, Fabio Ngo [email protected] wrote:

sorry, is the latest version of materialize css supported requirejs ?

—
Reply to this email directly or view it on GitHub
#634 (comment)
.

[dptole]

I'm using https://github.com/max1011/materialize-AMD so that I can have AngularJS/RequireJS/MaterializeCSS together. I had problems with Materialize.toast but I solved it by:

1 - Requiring hammer.js as a separate file. Necessary to expose the Hammer function.

<script src="hammer.js">

2 - Exposing $.Velocity to the global scope.

window.Vel = $.Velocity;

[ccloli]

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 #634 (comment)) :

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.

[lmadrilejos]

Hello Everyone,

I'm having the same issue here, I have tried doing almost all of the suggested steps on this post but still I'm having the same issue. I couldn't include or define materialize inside my pageview, please help... many thanks....

[ccloli]

@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

[lmadrilejos]

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

[mister-good-deal]

Hi all, the lack of AMD support is really annoying ... When using bower with a gulp build system you cannot use the original materialize repo without hacking your r.js config.
Or you can chose to use max1011 amd support which is not updated since more than 1 year or the ccloli solution which will be not maintained and already outdated (V0.97.6 while V0.97.7 for the original repo).
I may write a custom r.js config to build a materialize.js from your source but if I do would you mind to include this setup and provide a materialize.amd.js in your future versions ?

My current error is TypeError: dragTarget.hammer is not a function

With this r.js config

require.config(
    {
        'paths' : {
            'require'    : 'vendors/require',
            'domReady'   : 'vendors/domReady',
            'es6'        : 'vendors/requirejs-babel/es6',
            'babel'      : 'vendors/requirejs-babel/babel-5.8.34.min',
            'materialize': 'vendors/materialize',
            'jquery'     : 'vendors/jquery',
            'lodash'     : 'vendors/lodash'
        },
        'shim'  : {
            'materialize': {
                'deps': ['jquery']
            }
        }
    }
);

require(['app']);

app.js

require(
    [
        'jquery',
        'materialize',
        'domReady!'
    ],
    function ($) {
        console.log('app start');
        $('.button-collapse').sideNav();
    }
);

[ccloli]

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

[mister-good-deal]

Thank you for your quick answer, I will use your repo as a bower dependency so.
If all AMD users use your solution, you will have a lot of downloads in your repo :p
I still wait for an "official" solution, as I said, if their development team need some help to configure a build system for their js I'm OK to contribute.

[mister-good-deal]

Thanks it works well.
The build is bit longer due to the checkout on your repo.

[18:46:29] bower checkout AMD-fix
[18:46:36] bower resolved https://github.com/ccloli/materialize.git#a396777219
[18:46:37] Finished 'bowerDownload' after 8.83 s

But it works ;p

For people who are interested in bower config, here is my bower.json file

{
    "name"        : "laravel-boilerplate",
    "description" : "Laravel boilerplate for sweet front integration / automation",
    "authors"     : [
        "Romain Laneuville"
    ],
    "license"     : "MIT",
    "keywords"    : [
        "Laravel",
        "js",
        "front",
        "gulp"
    ],
    "homepage"    : "http://gitlab.laneuville.me/Laneuville/laravel-boilerplate",
    "moduleType"  : [
        "amd"
    ],
    "dependencies": {
        "jquery"         : "^2.2.4",
        "lodash"         : "^4.13.1",
        "materialize"    : "https://github.com/ccloli/materialize.git#AMD-fix",
        "roboto-fontface": "^0.5.0",
        "font-awesome"   : "^4.6.3",
        "requirejs-babel": "^0.0.9",
        "requirejs"      : "^2.2.0",
        "domReady"       : "^2.0.1"
    },
    "ignore"      : [
        "**/.*",
        "node_modules",
        "bower_components",
        "test",
        "tests"
    ]
}

Btw it's not on this topic but I had to manual download and build roboto-fontface to make it works correctly.

[rakibulalam]

(function (factory) {
if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module depending on.
    define(['hammerjs','velocity'], factory);
} else {
    // No AMD. Register plugin with global object.
    factory(Hammer,Vel);
}
}(function (Hammer,Vel) {
//toast code here 
Materialize.toast = function (message, displayLength, className, completeCallback) {}

}));

//require config

'toasts': {
            deps: ['hammerjs', 'velocity']
  },

[mikitachu]

There is possibly an another way to fix and it looks much easier to implement. Still is not clear, but it applies to all solutions for me.

You could just give any name to anonymous modules. Replace:
define(['jquery', 'hammerjs'], factory);
with
define('fix1', ['jquery', 'hammerjs'], factory);

And replace:
define( ['picker', 'jquery'], factory )
with
define('fix2', ['picker', 'jquery'], factory )

Worked for me. There are 2 more anonymous defines in minified code, but it doesn't cause any errors for me. You could add names there too.

[tomscholz]

Closed due inactivity and I'm going to lock this issue because it's veeery old and any new discussion should probably happen on a new issue. :)

[Dogfalo]

@tomscholz Please make a similarly titled issue and link it here