Materialize: sideNav not working with Requirejs

Created on 16 Jul 2015 · 11Comments · Source: Dogfalo/materialize

Hello,
I am creating an app using Cordova and RequireJS.

When inizializo sidenav in a console I get this error: Uncaught TypeError: $ (...). Hammer is not a function.

With other elements that I tried as modal dropdown and I have no problems.

regards,
Paolo

Source

ThunderPaul

👍1

Most helpful comment

I am facing this issue as well and i've tried a bunch of things to get it working but have not had success. There has to be a better way other than including the individual js files. I have a project due very soon and I need this fixed. Please help, thank you.

// OLD
requirejs.config({
baseUrl: 'js',
paths: {
jquery: 'lib/jquery',
knockout: 'lib/knockout',
materialize: 'lib/materialize',
socketio: 'lib/socket.io',
hammerjs: 'lib/hammerjs',
velocity: 'lib/velocity',
},
shim:{
'materialize':{
deps: ['jquery', 'hammerjs', 'velocity']
}
}
});

EDIT: including the jquery.hammer.js file and shimming it fixed this issue.

// NEW
requirejs.config({
baseUrl: 'js',
paths: {
jquery: 'lib/jquery',
knockout: 'lib/knockout',
materialize: 'lib/materialize',
socketio: 'lib/socket.io',
hammerjs: 'lib/hammerjs',
"jquery-hammerjs": 'lib/jquery.hammer',
velocity: 'lib/velocity',
},
shim:{
'materialize':{
deps: ['jquery', 'hammerjs', 'jquery-hammerjs', 'velocity']
}
}
});

ka05 on 25 Oct 2015

👍3

All 11 comments

:+1:

ashishsajwan on 22 Jul 2015

Resolved.

ThunderPaul on 22 Jul 2015

How?

MisterEdel on 22 Jul 2015

The problem was that I included the library materialize.js full instead of uploading files individually js elements .

I am preparing a small app starter so as to have a setup ready for future applications (Cordova + RequireJS + BackboneJS + Handlebars ) .

ThunderPaul on 22 Jul 2015

can you please explain in details how you solved it ?? @ThunderPaul

ashishsajwan on 22 Jul 2015

This is my main.js for requirejs


require.config({
    waitSeconds: 0,
    paths:{ 
                'app': 'app',
        'jquery': '../libs/jquery/jquery',
        'jquery-hammer': '../libs/hammer/jquery.hammer',
        'backbone': '../libs/backbone/backbone',
        'underscore': '../libs/underscrore/underscore',
        'text': '../libs/requirejs/plugin/text',
        'handlebars': '../libs/handlebars/handlebars',
        'baasbox': '../libs/baasbox/baasbox',
        'router': 'router',
        'templates': '../templates',
        'hammerjs': '../libs/materialize/js/libs/hammer.min',
                'jquery.easing': '../libs/materialize/js/libs/jquery.easing.1.3',
                'velocity': '../libs/velocity/velocity',
                'velocity-ui': '../libs/velocity/velocity.ui',
                'picker': '../libs/materialize/js/libs/date_picker/picker',
                'picker.date': '../libs/materialize/js/libs/date_picker/picker.date',
                'waves': '../libs/materialize/js/libs/waves',
                'global': '../libs/materialize/js/libs/global',
                'animation': '../libs/materialize/js/libs/animation',
                'collapsible': '../libs/materialize/js/libs/collapsible',
                'dropdown': '../libs/materialize/js/libs/dropdown',
                'leanModal': '../libs/materialize/js/libs/leanModal',
                'materialbox': '../libs/materialize/js/libs/materialbox',
                'tabs': '../libs/materialize/js/libs/tabs',
                'sideNav': '../libs/materialize/js/libs/sideNav',
                'parallax': '../libs/materialize/js/libs/parallax',
                'scrollspy': '../libs/materialize/js/libs/scrollspy',
                'tooltip': '../libs/materialize/js/libs/tooltip',
                'slider': '../libs/materialize/js/libs/slider',
                'cards': '../libs/materialize/js/libs/cards',
                'buttons': '../libs/materialize/js/libs/buttons',
                'pushpin': '../libs/materialize/js/libs/pushpin',
                'character_counter': '../libs/materialize/js/libs/character_counter',
                'toasts': '../libs/materialize/js/libs/toasts',
                'forms': '../libs/materialize/js/libs/forms',
                'scrollFire': '../libs/materialize/js/libs/scrollFire',
                'transitions': '../libs/materialize/js/libs/transitions',
                'jquery.hammer': '../libs/materialize/js/libs/jquery.hammer',
                'jquery.timeago': '../libs/materialize/js/libs/jquery.timeago.min',
                'materialize': '../libs/materialize/js/materializeMain',
    },
    shim:{
            'backbone':{
                deps:['underscore', 'jquery']
            },
            'baasbox':{
                deps:['jquery']
            },
            'jquery': { exports: "$" },
                'underscore': { exports: "_"},
                'backbone': { exports: 'Backbone'},
                'handlebars': { exports: 'Handlebars'},
                'animation': ['jquery'],
                'buttons': ['jquery'],
                'cards': ['jquery'],
                'character_counter': ['jquery'],
                'collapsible': ['jquery'],
                'dropdown': ['jquery'],
                'forms': ['jquery', 'global'],
                'global': { deps: ['jquery'], exports: "Materialize" },
                'jquery.easing': ['jquery'],
                'jquery.hammer': ['jquery', 'hammerjs', 'waves'],
                'jquery.timeago': ['jquery'],
                'leanModal': ['jquery'],
                'materialbox': ['jquery'],
                'parallax': ['jquery'],
                'pushpin': ['jquery'],
                'scrollFire': ['jquery', 'global'],
                'scrollspy': ['jquery'],
                'sideNav': ['jquery','velocity', 'hammerjs'],
                'slider': ['jquery'],
                'tabs': ['jquery'],
                'toasts': ['global'],
                'tooltip': ['jquery'],
                'transitions': ['jquery','scrollFire'],
                'waves': { exports: 'Waves' },
            },
});
// Inizializing the app
require(['app']);

my router.js


define(
    [
    'jquery',
    'backbone',
    'handlebars',
    'views/nav/NavView',
    'views/pages/HomeView',
    'views/pages/Pagina2View',

], function($, Backbone, Handlebars, Nav, HomeViews, HomeViews2){
    var Router = Backbone.Router.extend({
        routes: {
            "": "showHome",
            "home": "home",
            "pagina2": "pagina2",
        },
        firstView: "home",
        showHome: function(){

            var nav = new Nav();
            this.home();
        },
        home: function(){
            var home = new HomeViews();
            home.render();
        },
        pagina2: function(){
            var home = new HomeViews2();
            home.render();
        }
    });
    return Router;
});

and Nav.js


define(
    [
    'jquery',
    'backbone',
    'handlebars',
    'text!templates/nav.html',
    'sideNav',
    'materialize',
    'velocity',
    'hammerjs',
    'jquery.hammer',
], function($, Backbone, Handlebars, Template){
    var View = Backbone.View.extend({

        events:{
            'click .side-nav > li > a': 'navigate',
        },
        el: $('#nav-content'),
        initialize: function(){
            this.template = Handlebars.compile(Template);
            this.render();
        },
        render: function(){
            this.$el.empty();
            this.$el.html(this.template);
            this.navBarInit();
            return this;
        },
        navigate: function(e){
            e.preventDefault();
            var href = $(e.currentTarget).attr("href");
            Backbone.history.navigate(href, { trigger: true });

        },
        navBarInit: function(){
            /*** Per evitare comparsa doppio overlay ***/
            /*if($('.drag-target').length){
                $('.drag-target').remove();
            }*/
            $('.button-collapse').sideNav({'closeOnClick': true});
        },
    });

    return View;
})

index.html have 2 div #nav-content and #page-content
If you want I can pass you directly entire project folder , I also changed the file sidenav.js so you can close the menu by pointing with the finger on the menu, and not only on the overlay .

I would like to optimize it a little and then I will make the project public git

ThunderPaul on 22 Jul 2015

i am facing issue.
$(...).sideNav is not a function.

is there any solution for that?

bhalalapj on 11 Oct 2015

EDIT: including the jquery.hammer.js file and shimming it fixed this issue.

ka05 on 25 Oct 2015

👍3

@ka05 : u just saved me!! thnak you.

mzmmlds on 16 May 2016

Thank you so much. It fixed my issue. @ka05

suchibharani on 21 Nov 2016

@ka05 yes this work for me, but i add a few dependencies:

      jquery_hammerjs:
        deps: [
          'jquery'
          'hammerjs'
        ]
      materialize:
        deps: [
          'jquery'
          'hammerjs'
          'jquery_hammerjs'
          'velocity'
        ]
      materialize_loader:
        deps: [
          'jquery'
        ]