"Match.Error" message : "Match error: Expected particular constructor"

Question

I am new to the Meteor and React Framework, and I am trying to incorporate 'search' in meteor, and using the package easysearch for it. I am getting an error. The exact wordings of the error are as follows:

match.js:40 Uncaught 
errorClass {message: "Match error: Expected particular constructor", path: "", sanitizedError: errorClass, errorType: "Match.Error", stack: "Error: Match error: Expected particular constructo…5a95662d577f9e8a17248e5683161da2f8b114da:3779:14)"}
errorType: "Match.Error"
message: "Match error: Expected particular constructor"
path: ""

I really cannot understand why this error is occurring and how to solve this. I am writing my code below, so that the error can be found exactly.

search.html (the blaze template for the search)

    <template name="search">
    <div id="search-wrap">
        <div>Search page!</div>
        <div class="black searchbar">
            {{> EasySearch.Input index=index attributes=inputAttributes }}
        </div>

        {{#EasySearch.IfInputEmpty index=index }}
            <div class="padded examples black">For example "Company 1"</div>
        {{else}}
            {{#if resultsCount}}
                <div class="padded count-results black">{{resultsCount}} results found.</div>
            {{/if}}
        {{/EasySearch.IfInputEmpty}}

        {{#EasySearch.IfSearching index=index }}
            <div>Searching</div>
        {{/EasySearch.IfSearching}}

        <ol class="leaderboard">
            {{#EasySearch.Each index=index }}
                {{> User}}
            {{/EasySearch.Each}}
        </ol>

        {{#EasySearch.IfNoResults index=index }}
            <div class="padded no-results black">No results found</div>
        {{else}}
        {{/EasySearch.IfNoResults}}

        {{> EasySearch.Pagination index=index maxPages=10 }}
        {{! > EasySearch.LoadMore index=index}}

        {{#if showMore}}
            {{> EasySearch.Input name="mini-index" index=index attributes=inputAttributes }}
            <ul>
                {{#EasySearch.Each name="mini-index" index=index}}
                    <li>{{name}}</li>
                {{/EasySearch.Each}}
            </ul>

        {{/if}}
        <!-- Easy Search -->
    </div>
    <!-- End search -->

 --></template>

<template name="User">
    <li class="user black {{selected}}" id="user-link">
         <span class="name">{{name}}</span>
      </li>
</template>

The index.js file (Creating an index on the Collection - companies)

import Companies from "./companies.js";
import { EasySearch } from 'meteor/easy:search';
import { Meteor } from 'meteor/meteor';
import { Mongo } from "meteor/mongo";


export const CompaniesIndex = new EasySearch.Index({
    engine: new EasySearch.MongoDB({
        sort: function() {
            //return based on the latest additions, newest on top
            return { createdAt: -1 };
        },
        //something easy search always asks for
        selector: function(searchObject, options, aggregation) {
            let selector = this.defaultConfiguration().selector(searchObject, options, aggregation),
            //to sort with category.
            categoryFilter = options.search.props.categoryFilter;

            //search with a category, not really sure what it does, using the easysearch docs.
            if(_.isString(categoryFilter) && !_.isEmpty(categoryFilter)) {
                selector.category = categoryFilter;
            }

            return selector;
        }
    }),
    //collection name
    collection: Companies,
    //fieldname to be searched on
    fields: ['name'],
    defaultSearchOptions: {
        //limit the results size to be 10
        limit: 10
    },
    permission: () => {
        return true;
    }
});

// export const CompaniesIndex;

The jsx file (Company-search-trial.jsx)

import React from "react";
import Blaze from "meteor/gadicc:blaze-react-component";
import "./pages/search.html";
import Companies from "../api/data/companies.js";
import CompaniesIndex from "../api/data/index.js";

/* A set of controls for the user to select search queries and options.
 * For use in the CompanySearchPage.
 */



Template.search.rendered = function() {
    $("#search-link").addClass('selected');
    $("#profile-link").removeClass('selected');
    $("#rankings-link").removeClass('selected');
    $("#jokes-link").removeClass('selected');
    $("#login-link").removeClass('selected');
}

Template.search.helpers({
    inputAttributes: function() {
        return { 'class': 'easy-search-input', 'placeholder': 'Start Searching' };
    },
    players: function() {
        return Companies.find({}, { sort: { createdAt: -1 } });
    },
    selectedName: function() {
        var company = CompaniesIndex.config.mongoCollection.findOne({ __originalId: Session.get("selectedCompany") });
        return company && company.Name;
    },
    index: function () {
        return CompaniesIndex;
    },
    resultsCount: function() {
        return CompaniesIndex.getComponentDict().get('count');
    },
    showMore: function() {
        return false;
    },

    renderTmpl: () => Template.renderTemplate

});

Template.User.helpers({
    selected: function() {
        return Session.equals("selectedCompany", this.__originalId) ? "selected" : '';
    },
});

Template.User.events({
    'click': function() {
        Session.set("selectedCompany", this.__originalId);
    }
});


export default class CompanySearchTrial extends React.Component {
    render() {
         return (
            <div className="page CompanySearchTrial">
                <Blaze template="search"/>
            </div>
        );
    }
}

Can someone please help me with this. I am really clueless, as to how to go about doing this. Thanks!

Answer 1

The error: Match error: Expected particular constructor" points to a likely cause of an invalid parameter to a function. It also gives us the pointer that it's a missing constructor that's the issue.

The two things in your code that use constructors (ie. are instantiated with new) are EasySearch.Index and EasySearch.MongoDBEngine.

Taking a quick look at the documentation for EasySearch, the correct way to import both of these classes is like so:

import { Index, MongoDBEngine } from 'meteor/easy:search'

// Client and Server
const index = new Index({
  ...
  engine: new MongoDBEngine({
    sort: () => { score: 1 },
  }),
});

Give the above a go and see if it solves your issue