title: TypeError: $(...).sideNav is not a function
body: <p>I am trying to use Materialize theme to make a side bar in JSF with <code>Spring</code>. And I imported the Materialize's <code>js</code> and <code>css</code>, but it comes out an error <code>TypeError: $(...).sideNav is not a function</code>. I don't know why, and I tried in a normal HTML file, and it works.</p>
  
  <p>What is the reason that I get this error and how to fix it?</p>
  
  <p>The structure of the page:</p>
  
  <pre><code>&lt;h:head&gt;
  &lt;title&gt;&lt;h:outputText value="#{msg.title}" /&gt;&lt;/title&gt;
  
     &lt;!-- Import Materialize css --&gt;
   &lt;link rel="stylesheet" href="./themes/materialize/css/materialize.min.css"/&gt;
  
   &lt;!-- Compiled and minified JavaScript --&gt;
   &lt;script src="./themes/materialize/js/materialize.min.js"&gt;&lt;/script&gt;
  &lt;script src="./themes/materialize/js/materialize.js"&gt;&lt;/script&gt;
   &lt;!--Import jQuery before materialize.js--&gt;
   &lt;script type="text/javascript" src="./js/jquery-3.2.1.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  
  
    (function($){
    $(function(){
  
        $('.button-collapse').sideNav('show');
  
    }); // end of document ready
  })(jQuery); // end of jQuery name space
  &lt;/script&gt;
  
  &lt;/h:head&gt;
  
    &lt;h:body onload="init();"&gt;
  
  
  &lt;!--&lt;table id="Table_01" class="Table_01"&gt;--&gt;
  &lt;table id="WholeFunctionPageLayoutTable" cellspacing="0px" cellpadding="0px" width="100%"
          border="0px"&gt;
  
          &lt;tr id="WholeFunctionPageWidthSpacer" &gt;
  
  
  
              &lt;td&gt;
              &lt;!--&lt;table class="Table_SASC_03"&gt;--&gt;
                  &lt;table cellspacing="0px" cellpadding="0px" style="margin-left:0px; padding-left:0px;" border="0px"&gt;
                      &lt;tr valign="top"&gt;
                          &lt;td&gt;
                              &lt;ui:include src="MenuTemplate.xhtml" /&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;                                                                       
                  &lt;/table&gt;
              &lt;/td&gt;
              &lt;!-- End Page Left Menu Navigation Section --&gt;
  
          &lt;/tr&gt;
  
   &lt;/table&gt;
   &lt;/h:body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p><br></p>
  
  <p>The JSF file <code>menuTemplate.xhtml</code> that trying to make a side bar.</p>
  
  <pre><code>&lt;ui:composition&gt;
  
  &lt;ul id="slide-out" class="side-nav"&gt;
     &lt;li&gt;&lt;div class="userView"&gt;
        &lt;div class="background"&gt;
          &lt;img src="../img/EN_logo.jpg"/&gt;
        &lt;/div&gt;
          &lt;a href="#!user"&gt;&lt;img class="circle" src="../img/EN_logo.jpg"/&gt;&lt;/a&gt;
          &lt;a href="#!name"&gt;&lt;span class="white-text name"&gt;John Doe&lt;/span&gt;&lt;/a&gt;
          &lt;a href="#!email"&gt;&lt;span class="white-text 
                                   email"&gt;jdandturk@gmail.com&lt;/span&gt;&lt;/a&gt;
         &lt;/div&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="#!"&gt;&lt;i class="material-icons"&gt;cloud&lt;/i&gt;First Link With I 
       con&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#!"&gt;Second Link&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;div class="divider"&gt;&lt;/div&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a class="subheader"&gt;Subheader&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a class="waves-effect" href="#!"&gt;Third Link With Waves&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
        &lt;a href="#" data-activates="slide-out" class="button-collapse"&gt;menu&lt;/a&gt;
   &lt;/ui:composition&gt;
  </code></pre>
  
  <p>The error message:</p>
  
  <p><a href="https://i.stack.imgur.com/YW8CE.png" rel="noreferrer"><img src="https://i.stack.imgur.com/YW8CE.png" alt="enter image description here"></a></p>