Searchkit not working with Elasticsearch 6.0

Hey

Searchkit is not wokring with Elasticsearch 6.0… It gives a ‘malformed query’ error.

It works well with 5.6.3 but gives the ‘malformed query’ error with 6.0.

My App.js (C:\Users\User\Folder\src\App.js) script is as follows:

import React, { Component } from 'react'
import extend from 'lodash/extend'
import {
  SearchkitManager, SearchkitProvider,
  SearchBox, RefinementListFilter, Pagination,
  HierarchicalMenuFilter, HitsStats, SortingSelector, NoHits,
  ResetFilters, RangeFilter, NumericRefinementListFilter,
  ViewSwitcherHits, ViewSwitcherToggle, DynamicRangeFilter,
  InputFilter, GroupedSelectedFilters,
  Layout, TopBar, LayoutBody, LayoutResults,
  ActionBar, ActionBarRow, SideBar, Select, Tabs
} from 'searchkit'
import './index.css'
import mainLogo from './0cebf3d61338c454670b1c5bdf5d6d8d.svg'

// const host = "http://demo.searchkit.co/api/movies"
const host = "http://localhost:9200/km_archive_emails/"
const searchkit = new SearchkitManager(host)

const MovieHitsGridItem = (props) => {
  const { bemBlocks, result } = props
  let url = "https://www.goodreads.com/search?q=" + result._source.subject
  const source = extend({}, result, result.highlight)
  // console.log(searchkit)
  return (
    <div className={bemBlocks.item().mix(bemBlocks.container("item"))} data-qa="hit">
      <a href={url} target="_blank">
        <img data-qa="poster" alt={result._source.from} className={bemBlocks.item("poster")} src={result._source.poster} width="170" height="240" />
        <div data-qa="title" id="title" className={bemBlocks.item("title")} dangerouslySetInnerHTML={{ __html: source.subject }}></div>
      </a>
    </div>
  )
}

const MovieHitsListItem = (props) => {
  const { bemBlocks, result } = props
  let url = "https://www.goodreads.com/search?q=" + result._source.subject
  const source = extend({}, result._source, result.highlight)
  return (
    <div className={bemBlocks.item().mix(bemBlocks.container("item"))} data-qa="hit">
      <div className={bemBlocks.item("poster")}>
        <img alt="From:" data-qa="poster" src={result._source.poster} />
      </div>
      <div className={bemBlocks.item("details")}>
        <a href={url} target="_blank"><h2 className={bemBlocks.item("title")} dangerouslySetInnerHTML={{ __html: source.from }}></h2></a>
        <h3 className={bemBlocks.item("subtitle")}>Sent to: {source.to}, Copied to: {source.cc ? source.cc : "NA"}, Has attachments: {source.has_attachments ? 'true' : 'false'}, rated {source.importance}/5</h3>
        <div className={bemBlocks.item("text")} dangerouslySetInnerHTML={{ __html: source.subject }}></div>
      </div>
    </div>
  )
}



class App extends Component {
  render() {
    return (
      <SearchkitProvider searchkit={searchkit}>
        <Layout>
          <TopBar>
            <div className="my-logo"><img src={mainLogo} alt="The Door.AI Search Engine" ></img></div>
            {/* <SearchBox autofocus={true} searchOnChange={true} prefixQueryFields={["actors^1","type^2","languages","title^10"]}/> */}
            <SearchBox autofocus={true} searchOnChange={true} prefixQueryFields={["from^1", "cc", "subject^10"]} />
          </TopBar>

          <LayoutBody>

            <SideBar>
              <HierarchicalMenuFilter fields={["has_attachments"]} title="Has Attachments" id="categories" translations={{ "0": "False", "1": "True" }} />
              <RangeFilter min={0} max={5} field="importance" id="importance_id" title="Importance" showHistogram={true} />
              <DynamicRangeFilter field="message_size" id="message_size" title="Message Size (in Bytes)" rangeFormatter={(count) => count + "*"} showHistogram={true} />
              <InputFilter id="to_id" searchThrottleTime={500} title="Sent To" placeholder="Search receivers" searchOnChange={true} queryFields={["to"]} />
              <RefinementListFilter  id="from_id" title="Sent By" field="from.keyword" operator="OR" size={10} />
              <RefinementListFilter id="writersFacets" translations={{ "facets.view_more": "View more writers" }} title="Copied to" field="cc.keyword" operator="OR" size={10} />
              <RefinementListFilter id="countries" title="Type" field="_type" operator="OR" size={10} />
              <NumericRefinementListFilter id="runtimeMinutes" title="Length" field="runtimeMinutes" options={[
                { title: "All" },
                { title: "up to 20", from: 0, to: 20 },
                { title: "21 to 60", from: 21, to: 60 },
                { title: "60 or more", from: 61, to: 1000 }
              ]} />
            </SideBar>
            <LayoutResults>
              <ActionBar>

                <ActionBarRow>
                  <HitsStats translations={{
                    "hitstats.results_found": "{hitCount} results found"
                  }} />
                  <ViewSwitcherToggle />
                  <SortingSelector options={[
                    { label: "Relevance", field: "_score", order: "desc" },
                    { label: "Latest Releases", field: "created_dt", order: "desc" },
                    { label: "Earliest Releases", field: "created_dt", order: "asc" }
                  ]} />
                </ActionBarRow>

                <ActionBarRow>
                  <GroupedSelectedFilters />
                  <ResetFilters />
                </ActionBarRow>

              </ActionBar>
              <ViewSwitcherHits
                hitsPerPage={12} highlightFields={["from", "subject"]}
                /* sourceFilter={["plot", "title", "poster", "imdbId", "imdbRating", "year"]} */
                sourceFilter={["subject", "from", "to", "cc", "received_dt", "created_dt", "modified_dt", "has_attachments", "importance"]}
                hitComponents={[
                  { key: "grid", title: "Grid", itemComponent: MovieHitsGridItem, defaultOption: true },
                  { key: "list", title: "List", itemComponent: MovieHitsListItem }
                ]}
                scrollTo="body"
              />
              <NoHits suggestionsField={"subject"} />
              <Pagination showNumbers={true} />
            </LayoutResults>

          </LayoutBody>
        </Layout>
      </SearchkitProvider>
    );
  }
}

export default App;

Please let me know if any further details are required.

@ssetem Please help. Thank you in advance!

[joemcelroy]

v2.3 is out now aswell. npm install searchkit will install v2.3.0.

Thanks

[jmrichardson]

Ok, got it working. For some reason I thought the new version had to use that package.json. Sorry, I am noob 😃