title: UncaughtError ReferenceError: Mustache is not defined
body: <p>hey I have problem in my am trying to build a little chat App but am stacked on rendering mustache template in node.js am asking for help
  here is my code:
  index.html file contain this code:</p>
  <pre><code>  &lt;!DOCTYPE html&gt;
      &lt;html lang=&quot;en&quot;&gt;
      &lt;head&gt;
          &lt;meta charset=&quot;UTF-8&quot;&gt;
          &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
          &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
          &lt;title&gt;chatApp&lt;/title&gt;
      &lt;/head&gt;
      &lt;body window.load=&quot;renderHello()&quot;&gt;
          &lt;h1&gt;CHAT APP&lt;/h1&gt;
          &lt;script id=&quot;messages&quot;&gt;&lt;/script&gt;
          &lt;form id=&quot;message-form&quot;&gt;
              &lt;input  name=&quot;message&quot; placeholder=&quot;Message&quot;&gt;
              &lt;button type=&quot;submit&quot;&gt;send&lt;/button&gt;
          &lt;/form&gt;
          &lt;button type=&quot;submit&quot; id=&quot;send-location&quot;&gt;sendLocation&lt;/button&gt;
          
          &lt;script id=&quot;message-template&quot; type=&quot;text/html&quot;&gt;
             &lt;div&gt;
              &lt;p&gt;this is me&lt;/p&gt; 
             &lt;/div&gt;           
          &lt;/script&gt;
          &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/mustache.js/3.0.1/mustache.min.js&quot;&gt;&lt;/script&gt;
          &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/qs/6.6.0/qs.min.js&quot;&gt;&lt;/script&gt;
          &lt;script src=&quot;/socket.io/socket.io.js&quot;&gt;&lt;/script&gt;
          &lt;script src=&quot;/js/chat.js&quot;&gt;&lt;/script&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  <p>then my chat.js file that includes where I rendered my template:</p>
  <pre><code>  const socket = io()
     //element
      const $messageForm = document.querySelector('#message-form')
      const $messageFormInput = $messageForm.querySelector('input')
      const $messageFormButton = $messageForm.querySelector('button')
      const $sendLocationButton = document.querySelector('#send-location')
      const $messages = document.querySelector('#messages')
  
      //template
      const $messageTemplate = document.querySelector('#message-template').innerHTML
  
      socket.on('message', (message) =&gt; {
          
          console.log(message)
          // function renderHello(){
          //     fetch('template.mustache')
          //     .then((response) =&gt; response.text())
          //     .then(() =&gt;{
                  const html = Mustache.render($messageTemplate)
                  $messages.insertAdjacentHTML('beforeend', html)
          //     })
                  
          // }
          
      })
         
      $messageForm.addEventListener('submit', (e) =&gt; {
          e.preventDefault()
          
          $messageFormButton.setAttribute('disabled', 'disabled')
          const message = e.target.elements.message.value
  
          socket.emit('sendMessage', message, (error) =&gt; {
              $messageFormButton.removeAttribute('disabled')
              $messageFormInput.value = ''
              $messageFormInput.focus()
              if (error) {
                  return console.log(error)
              }
             
              console.log('the message is delevered!')
          })
      })
      $sendLocationButton.addEventListener('click', () =&gt; { 
          if (!navigator.geolocation) {
              return alert('your browser not support geolocation')
          }
          $sendLocationButton.setAttribute('disabled', 'disabled')
          navigator.geolocation.getCurrentPosition((position) =&gt; {
  
              socket.emit('sendLocation', {
                  latitude: position.coords.latitude,
                  longitude: position.coords.longitude
              }, () =&gt; {
                  $sendLocationButton.removeAttribute('disabled')
                  console.log('shared location!')
              })
          })
      })
  </code></pre>
  <p>I have searched everywhere about it but seems its hard to find answer and there is where I didn't
  understand what they mean because am in backend end so thought I would ask here if I may get from here,  am waiting for your help a 'll be glad to here better from you</p>