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

Question

I am trying to use Materialize theme to make a side bar in JSF with Spring. And I imported the Materialize's js and css, but it comes out an error TypeError: $(...).sideNav is not a function. I don't know why, and I tried in a normal HTML file, and it works.

What is the reason that I get this error and how to fix it?

The structure of the page:


<h:outputText value="#{msg.title}" />

The JSF file menuTemplate.xhtml that trying to make a side bar.




   
      
        
      
        
        John Doe
        jdandturk@gmail.com
       
   cloudFirst Link With I 
     con
    Second Link
   
   Subheader
   Third Link With Waves
 
      menu

The error message:

user_7398558 · Answer

Materialize is compatible with jQuery3. You just have to load jQuery first before you load materialize.min.js.

user_7697425 · Answer

For .sideNav() to work, MaterializeCSS v1.0.0 is not compatible with jQuery v3 or v2, So you have to use older version of MaterializeCSS. Try 0.x.x: it worked for me!

eg:

user_1523157 · Answer

.sideNav() has been renamed .sidenav() in v1.0.0 see https://materializecss.com/sidenav.html

user_920057 · Answer

The order of loading is important, as stated above. JQuery 3.3.1 works with Materialize 1.0.0:

user_2252113 · Answer

Update: Oct-2017: Materialize v0.100.2 works with jQuery v3.2.1, provided you need to put them in the right order:

Below code snippet is taken from MaterializeCSS site:

user_8069111 · Answer

I hit the same problem. It is because jQuery must be loaded before the Materialize.min.js file. Once I switched the order, everything worked fine. No problem with getting this working with jQuery 3 as long as the order is correct.

user_18643297 · Answer

In your javascript initialization use sidenav() instead of sideNav()

Change this:

(function($){
   $(function(){
    $('.button-collapse').sideNav('show');
 });
})(jQuery);

To this:

(function($){
 $(function(){
  $('.sidenav').sidenav();
 });
})(jQuery);

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

9 Answers