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" notifications@github.com 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 https://github.com/Dogfalo/materialize/issues/634#issuecomment-77902594.

[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]

@T00rk did you reference materialize from the bin directory??

[T00rk]

@max1011 Yes that's ok now

[xhanrot]

Hi, I had a similar issue when using the "toast" function : I got a message "hammer is not a function". I tried the fix from @max1011 and it's OK now. I think it can be merged in master branch.

[max1011]

Great to hear that the fix is working, thanks everyone! :)

[jfpwork]

Dont know why but moving scrollFire = function(){...} before $(document).ready(function() {..} at line 2966 of Materialize v0.95.3, so no more error message : Uncaught ReferenceError: scrollFire is not defined at line 2995

[max1011]

With amd the ready event might fire before amd runs (it uses a different event) and issues could happen so that's why this happens with require.js and doesn't happen with the normal usage of materialize

[peqp1988]

Your solution works!

[max1011]

Thanks @patriciapineda, i hope it will be in master soon!

[ekarudianto]

hmmmm after did some reading I think I faced the same issue

here

would you mind to take a look at my issue @max1011 ?

[max1011]

@ekarudianto use the repo that was use in pull request #794 instead of the original project which is my own repo, you can read how it was fixed if you want to, it's a bit complex, so just use the repo and include the materialize file from the bin directory and there is no need to anyother deps, LMK if this works!

[ekarudianto]

ummm I think it didn't work you could read my last comment here @max1011

[sirugh]

I just discovered a similar issue using the [require-handlebars-plugin(https://github.com/SlexAxton/require-handlebars-plugin).

Haven't tried @max1011 's fix yet, will update after.

[kkoch986]

I had some luck by adding the following to my gruntfile which builds materialize:

file_append: {
      dist: {
        files: [
          {
            prepend: "require(['jquery', 'hammerjs', 'velocity'], function($, Hammer, Velocity) { define.amd = false;",
            append: "});",
            input: 'dist/js/materialize.js',
            output: 'dist/js/materialize.js'
          }
        ]
      }
    },

then just using it without requires shim config. Also removed the hammer.min and verlocity.min and loaded them separately using the following config:

requirejs.config({
    baseUrl: 'src/js',
    paths: {
        "jquery" : "vendor/jquery",
        'velocity': './materialize/velocity.min',
        'hammerjs': './materialize/hammer.min',
        'materialize': '../../dist/js/materialize',
    },
});

hope that helps someone, i was trying to build this into a single file using rjs and was having all kinds of problems, this seemed to be the best working way. Havent tested out all the functionality but waves and hammer seem to be working ok.

[max1011]

@kkoch986 , this is the method i am using and it works, but let me tell you one thing, it's not using the benefit of require.js, and it will also expose the variables to the window object (meaning they will be global), but we use require.js in order to prevent global scope pollution, so that's why i was working on a new solution which is creating a separate file for amd, e.g. materialize.amd.js which requires all the dependencies in an async way, so you can remove any deps that you don't need from there and it will still work perfectly, and i optimize it and make it one file (one request) with r.js optimizer, i know it's kind of difficult and full of bugs but i did it with no bugs (after facing lots of bugs) and it works, i tested it today you can use any of both (the optimized version and the original one), and the user can customize the original file and load only what he needs (he also needs to run r.js to generate the new file) and it will always work ! , so i will be posting the new solution with a guide soon, i will give you a heads up when i do that

[max1011]

@kkoch986 i have it ready at materialize-AMD, all you need to do to use is just use the materialize.amd.js from the dist directory, you can see what i did there, i added the materialize amd file and a config file for r.js to concatenate all of the file together in AMD way, the original file is in /js, and to run r.js, all you have to do is to run these commands:

cd js
r.js -o app.build.js 

if r.js is not available just download r.js-require optimizer anytime you add a new module you have to add it to the materialize.amd.js and run r.js, that's all, it's a way better solution now the user can customize this file and run r.js to get the custom file with all the modifications and there is no global scope pollution so problem solved, when @Dogfalo sees this, i will propose that solution rather than the old one (after some people try it out and confirm it's working)

[kkoch986]

@max1011 looks cool, ill try to check it out asap, for now what i have works well enough so im gonna move on thanks!

[max1011]

your welcome buddy!

[rheaditi]

Hi! @max1011 I'm new to Javascript as a whole so please bare with me if these are silly :P

So, I've used your dist/materialize.amd.js in my project and included in the "main" as:

requirejs.config({
    baseUrl: 'js/',
    paths: {
        'jquery': 'jquery-2.1.4',
        'materialize': 'materialize.amd'
    },
    shim: {
        'jquery': {
            exports: '$'
        },
        'materialize': {
            deps: ['jquery']
        }
    }
});

require(['jquery', 'materialize'],
function ($, materialize) {

    $(".button-collapse").sideNav();
    $('.parallax').parallax();
    $('.dropdown-button').dropdown();    

});

I get the following errors in the console:

• Uncaught ReferenceError: Materialize is not defined(anonymous function) @ materialize.amd.js:1
• main.js:20 Uncaught TypeError: $(...).sideNav is not a function

[max1011]

@rheaditi well that was my fault i tested the changes on an old version of materialize, but added them on a new one, so i re-modified the code to work with the new version, try pulling now and LMK if it works!, and also one thing with your code, is after $ you don't need materialize because it is undefined ! so just remove it

[rheaditi]

Hi, @max1011 . Thanks for replying! Used the materialize.amd.js file (modified 2 days ago). Still getting:

• Uncaught TypeError: $(...).sideNav is not a function

"main" as follows, removed materialize:

requirejs.config({
    baseUrl: 'js/',
    paths: {
        jquery: 'jquery-2.1.4',
        materialize: 'materialize.amd'
    },
    shim: {
        'jquery': {
            exports: '$'
        },
        'materialize': {
            deps: ['jquery']
        }
    }
});

require(['jquery', 'materialize'],
function ($) {
    $(".button-collapse").sideNav();
    $('.parallax').parallax();
    $('.dropdown-button').dropdown();    

});

[max1011]

Did you pull the new code?, and that js directory is it in dist or not?

[vuza]

@rheaditi I just got it up and running by including every single file in /js from @max1011 materialize-amd repo, except from materialize.amd, directly into my require.config.

require.config({
    baseUrl: 'myBaseUrl',

   paths: {
        /** my stuff .. */

       'hammerjs': 'vendor/materialize/hammer.min',
        'jquery.easing': 'vendor/materialize/jquery.easing.1.3',
        'velocity': 'vendor/materialize/velocity.min',
        'picker': 'vendor/materialize/date_picker/picker',
        'picker.date': 'vendor/materialize/date_picker/picker.date',
        'waves': 'vendor/materialize/waves',
        'global': 'vendor/materialize/global',
        'animation': 'vendor/materialize/animation',
        'collapsible': 'vendor/materialize/collapsible',
        'dropdown': 'vendor/materialize/dropdown',
        'leanModal': 'vendor/materialize/leanModal',
        'materialbox': 'vendor/materialize/materialbox',
        'tabs': 'vendor/materialize/tabs',
        'sideNav': 'vendor/materialize/sideNav',
        'parallax': 'vendor/materialize/parallax',
        'scrollspy': 'vendor/materialize/scrollspy',
        'tooltip': 'vendor/materialize/tooltip',
        'slider': 'vendor/materialize/slider',
        'cards': 'vendor/materialize/cards',
        'buttons': 'vendor/materialize/buttons',
        'pushpin': 'vendor/materialize/pushpin',
        'character_counter': 'vendor/materialize/character_counter',
        'toasts': 'vendor/materialize/toasts',
        'forms': 'vendor/materialize/forms',
        'scrollFire': 'vendor/materialize/scrollFire',
        'transitions': 'vendor/materialize/transitions',
        'jquery.hammer': 'vendor/materialize/jquery.hammer'
    },

   shim: {
       /** my stuff .. */

      'jquery.easing': {
            deps: ['jquery']
        },
        'animation': {
            deps: ['jquery']
        },
        'jquery.hammer': {
            deps: ['jquery', 'hammerjs', 'waves']
        },
        'global': {
            deps: ['jquery']
        },
        'toasts': {
            deps: ['global']
        },
        'collapsible': {
            deps: ['jquery']
        },
        'dropdown': {
            deps: ['jquery']
        },
        'leanModal': {
            deps: ['jquery']
        },
        'materialbox': {
            deps: ['jquery']
        },
        'parallax': {
            deps: ['jquery']
        },
        'tabs': {
            deps: ['jquery']
        },
        'tooltip': {
            deps: ['jquery']
        },
        'sideNav': {
            deps: ['jquery']
        },
        'scrollspy': {
            deps: ['jquery']
        },
        'forms': {
            deps: ['jquery', 'global']
        },
        'slider': {
            deps: ['jquery']
        },
        'cards': {
            deps: ['jquery']
        },
        'pushpin': {
            deps: ['jquery']
        },
        'buttons': {
            deps: ['jquery']
        },
        'transitions': {
            deps: ['jquery','scrollFire']
        },
        'scrollFire': {
            deps: ['jquery', 'global']
        },
        'waves': {
            exports: 'Waves'
        },
        'character_counter': {
            deps: ['jquery']
        }
   },

    deps: ['jquery', /** my stuff ... */]
}

require([
        /** my stuff ... */

       'jquery.easing',
        'animation',
        'velocity',
        'hammerjs',
        'jquery.hammer',
        'global', // very important do not remove!
        'collapsible',
        'dropdown',
        'leanModal',
        'materialbox',
        'parallax',
        'tabs',
        'tooltip',
        'waves',
        'toasts',
        'sideNav',
        'scrollspy',
        'forms',
        'slider',
        'cards',
        'pushpin',
        'buttons',
        'scrollFire',
        'transitions',
        'picker',
        'picker.date',
        'character_counter'],
    function(App){
        /** All materialize functions available here! */
        App.start();
    }
);

[rheaditi]

@max1011 Yes, I pulled your new code. I just copied "dist/js/materialize.amd.js" from your repo to my own project. Double checked just now!

@vuza I'll give that a try, if all fails!

[max1011]

Try using the entire repo instead of just that file because your version might be a little different