title: ListJS: TypeError: list.templater is undefined + Source Map URL: list.js.map (with Wordpress)
body: <p>I am writing a plugin for <code>wordpress</code>. The idea is to get data from one API, then serve a filtered / remixed version of that data to a <code>listjs</code> container / list through a <code>shortcode</code>. <code>List.js</code> is not working as expected. I'm developing locally and trying to keep this concise, but I have put the entire plugin code base up on github <a href="https://github.com/NotAnAmbiTurner/mbc_plugin" rel="nofollow noreferrer">here</a>.</p>
  <p>I can render text through the shortcode, so serving HTML appears to be working fine.</p>
  <p>When I am trying to use <code>listjs</code>, just to get <a href="https://listjs.com/examples/new-list/" rel="nofollow noreferrer">this example</a> working, however, it's not. I am getting the following errors, warnings, and logs in the JS devtools area of <code>Firefox</code>:</p>
  <pre><code>Uncaught TypeError: list.templater is undefined (list.js:497:11)
      values http://cdnjs.cloudflare.com/ajax/libs/list.js/2.3.1/list.js:497
      init http://cdnjs.cloudflare.com/ajax/libs/list.js/2.3.1/list.js:481
      List http://cdnjs.cloudflare.com/ajax/libs/list.js/2.3.1/list.js:520
      add http://cdnjs.cloudflare.com/ajax/libs/list.js/2.3.1/list.js:307
      &lt;anonymous&gt; http://localhost/wordpress/wp-content/plugins/bdh-mbc-mediator-directory/public/js/bdh-mbc-mediator-directory-list-js.js:25
  
  JQMIGRATE: Migrate is installed, version 3.3.2 (jquery-migrate.min.js:2:709) //not an error, but here for completeness
  
  Source map error: Error: request failed with status 404
  Resource URL: http://cdnjs.cloudflare.com/ajax/libs/list.js/2.3.1/list.js
  Source Map URL: list.js.map 2
  </code></pre>
  <p>Here is what does render on my site: you can see that <code>list.js</code> just isn't really doing what I would like it to, because there's no data being rendered, and there's no pagination (not that I'm sure that would show up with no data). The HTML after the page loads is just a search bar with a button that says &quot;name&quot; next to it:</p>
  <pre><code>&lt;div class=&quot;wp-container-7 entry-content wp-block-post-content&quot;&gt;
      &lt;div id=&quot;mbcusers&quot;&gt;
      &lt;input class=&quot;fuzzy-search&quot; placeholder=&quot;Search&quot;&gt;
  
      &lt;button class=&quot;sort&quot; data-sort=&quot;mbcname&quot;&gt;
      Sort by name
      &lt;/button&gt;
  
      &lt;ul class=&quot;mbclist&quot;&gt;&lt;/ul&gt;
  
      &lt;ul class=&quot;pagination&quot;&gt;&lt;/ul&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>I'm going to do the best to give you the contents of what I think are the relevant files, in order,</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// JS 1
  
  var mbcoptions = {
      valueNames: [ 'name', 'born' ],
      pagination: true,
      // Since there are no elements in the list, this will be used as template.
      item: '&lt;li&gt;&lt;h3 class="name"&gt;&lt;/h3&gt;&lt;p class="born"&gt;&lt;/p&gt;&lt;/li&gt;'
  };
  
  var mbcvalues = [
  {
      mbcname: 'Jonny Strömberg',
      mbcborn: 1986
  },
  {
      mbcname: 'Jonas Arnklint',
      mbcborn: 1985
  },
  {
      mbcname: 'Martina Elm',
      mbcborn: 1986
  }
  ];
  
  var mbcUserList = new List('mbcusers', mbcoptions, mbcvalues);
  
  mbcUserList.add({
      mbcname: 'Gustaf Lindqvist',
      mbcborn: 1983
  });
  
  // JS 2
  
  window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/14.0.0\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/14.0.0\/svg\/","svgExt":".svg","source":{"concatemoji":"http:\/\/localhost\/wordpress\/wp-includes\/js\/wp-emoji-release.min.js?ver=6.0.1"}};
  /*! This file is auto-generated */
  !function(e,a,t){var n,r,o,i=a.createElement("canvas"),p=i.getContext&amp;&amp;i.getContext("2d");function s(e,t){var a=String.fromCharCode,e=(p.clearRect(0,0,i.width,i.height),p.fillText(a.apply(this,e),0,0),i.toDataURL());return p.clearRect(0,0,i.width,i.height),p.fillText(a.apply(this,t),0,0),e===i.toDataURL()}function c(e){var t=a.createElement("script");t.src=e,t.defer=t.type="text/javascript",a.getElementsByTagName("head")[0].appendChild(t)}for(o=Array("flag","emoji"),t.supports={everything:!0,everythingExceptFlag:!0},r=0;r&lt;o.length;r++)t.supports[o[r]]=function(e){if(!p||!p.fillText)return!1;switch(p.textBaseline="top",p.font="600 32px Arial",e){case"flag":return s([127987,65039,8205,9895,65039],[127987,65039,8203,9895,65039])?!1:!s([55356,56826,55356,56819],[55356,56826,8203,55356,56819])&amp;&amp;!s([55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56423,56128,56447],[55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,56421,8203,56128,56430,8203,56128,56423,8203,56128,56447]);case"emoji":return!s([129777,127995,8205,129778,127999],[129777,127995,8203,129778,127999])}return!1}(o[r]),t.supports.everything=t.supports.everything&amp;&amp;t.supports[o[r]],"flag"!==o[r]&amp;&amp;(t.supports.everythingExceptFlag=t.supports.everythingExceptFlag&amp;&amp;t.supports[o[r]]);t.supports.everythingExceptFlag=t.supports.everythingExceptFlag&amp;&amp;!t.supports.flag,t.DOMReady=!1,t.readyCallback=function(){t.DOMReady=!0},t.supports.everything||(n=function(){t.readyCallback()},a.addEventListener?(a.addEventListener("DOMContentLoaded",n,!1),e.addEventListener("load",n,!1)):(e.attachEvent("onload",n),a.attachEvent("onreadystatechange",function(){"complete"===a.readyState&amp;&amp;t.readyCallback()})),(e=t.source||{}).concatemoji?c(e.concatemoji):e.wpemoji&amp;&amp;e.twemoji&amp;&amp;(c(e.twemoji),c(e.wpemoji)))}(window,document,window._wpemojiSettings);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.mbclist {
    font-family:sans-serif;
    margin:0;
    padding:20px 0 0;
  }
  .mbclist &gt; li {
    display:block;
    background-color: #eee;
    padding:10px;
    box-shadow: inset 0 1px 0 #fff;
  }
  .avatar {
    max-width: 150px;
  }
  img {
    max-width: 100%;
  }
  h3 {
    font-size: 16px;
    margin:0 0 0.3rem;
    font-weight: normal;
    font-weight:bold;
  }
  p {
    margin:0;
  }
  
  input {
    border:solid 1px #ccc;
    border-radius: 5px;
    padding:7px 14px;
    margin-bottom:10px
  }
  input:focus {
    outline:none;
    border-color:#aaa;
  }
  .sort {
    padding:8px 30px;
    border-radius: 6px;
    border:none;
    display:inline-block;
    color:#fff;
    text-decoration: none;
    background-color: #28a8e0;
    height:30px;
  }
  .sort:hover {
    text-decoration: none;
    background-color:#1b8aba;
  }
  .sort:focus {
    outline:none;
  }
  .sort:after {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid transparent;
    content:"";
    position: relative;
    top:-10px;
    right:-5px;
  }
  .sort.asc:after {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #fff;
    content:"";
    position: relative;
    top:13px;
    right:-5px;
  }
  .sort.desc:after {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #fff;
    content:"";
    position: relative;
    top:-10px;
    right:-5px;
  }
  
  .pagination li {
    display:inline-block;
    padding:5px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- In order, the following JS is loadedin HEAD on the relevant page:
    JS2 (shown below in the JS section)
    &lt;script src="http://localhost/wordpress/wp-includes/js/wp-emoji-release.min.js?ver=6.0.1" type="text/javascript" defer=""&gt;&lt;/script&gt;
    &lt;script src="http://localhost/wordpress/wp-includes/blocks/navigation/view.min.js?ver=009e29110e016c14bac4ba0ecc809fcd" id="wp-block-navigation-view-js"&gt;&lt;/script&gt;
    &lt;script src="//cdnjs.cloudflare.com/ajax/libs/list.js/2.3.1/list.js" id="listjs-js"&gt;&lt;/script&gt;
    &lt;script src="http://localhost/wordpress/wp-content/plugins/bdh-mbc-mediator-directory/public/js/bdh-mbc-mediator-directory-list-js.js" id="bdh_mbc_js-js"&gt;&lt;/script&gt;
    &lt;script src="http://localhost/wordpress/wp-includes/js/jquery/jquery.min.js?ver=3.6.0" id="jquery-core-js"&gt;&lt;/script&gt;
    &lt;script src="http://localhost/wordpress/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.3.2" id="jquery-migrate-js"&gt;&lt;/script&gt;
  
  --&gt;
  
  &lt;div id="mbcusers"&gt;
    &lt;input class="fuzzy-search" placeholder="Search" /&gt;
  
    &lt;button class="sort" data-sort="mbcname"&gt;
    Sort by name
    &lt;/button&gt;
  
    &lt;ul class="mbclist"&gt;&lt;/ul&gt;
  
    &lt;ul class="pagination"&gt;&lt;/ul&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I'm not too familiar with namespaces in JS, and I'm concerned the issue is being caused by a naming conflict. Alternatively, perhaps its an &quot;order of load&quot; issue?</p>