Lunrjs search on Jekyll website not working with TypeError

Update: Although I still haven't figured this out, I found an alternative that works: Search with Lunr.js | Jekyll Codex

I've been following this CloudCannon Academy tutorial on Jekyll search using lunr.js, but I still haven't get it working after many trials and errors.

When I open Microsoft Edge, my default web browser, I got the following errors in search.js:

search.js:47 
        
       Uncaught TypeError: idx.add is not a function
    at search.js:47:11
    at search.js:57:3

I've been following the tutorial step-by-step, so I basically copied everything from the linked webpage above. What I don't understand is that I certainly have defined idx as the tutorial does. And by checking source code, I have successfully retrieved all the post data and stored them in JSON. What did I do wrong?

For your information, I've attached my code below:

(function() {
  function displaySearchResults(results, store) {
    var searchResults = document.getElementById('search-results');

    if (results.length) { // Are there any results?
      var appendString = '';

      for (var i = 0; i < results.length; i++) {  // Iterate over the results
        var item = store[results[i].ref];
        appendString += '<li><a href="' + item.url + '"><h3>' + item.title + '</h3></a>';
        appendString += '<p>' + item.content.substring(0, 150) + '...</p></li>';
      }

      searchResults.innerHTML = appendString;
    } else {
      searchResults.innerHTML = '<li>No results found</li>';
    }
  }

  function getQueryVariable(variable) {
    var query = window.location.search.substring(1);
    var vars = query.split('&');
  
    for (var i = 0; i < vars.length; i++) {
      var pair = vars[i].split('=');
  
      if (pair[0] === variable) {
        return decodeURIComponent(pair[1].replace(/\+/g, '%20'));
      }
    }
  }
  
  var searchTerm = getQueryVariable('query');

  if (searchTerm) {
    document.getElementById('search-box').setAttribute("value", searchTerm);

    // Initalize lunr with the fields it will be searching on. I've given title
    // a boost of 10 to indicate matches on this field are more important.
    var idx = lunr(function () {
      this.field('id');
      this.field('title', { boost: 10 });
      this.field('content');
    });

    for (var key in window.store) { // Add the data to lunr
      idx.add({
        'id': key,
        'title': window.store[key].title,
        'content': window.store[key].content
      });

      var results = idx.search(searchTerm); // Get lunr to perform a search
      displaySearchResults(results, window.store); // We'll write this in the next section
    }
  }
})();
How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum