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

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