Angular Instant Search Custom Widget - Property 'refine' does not exist on type 'object'

Question

I've created a custom searchbox widget in my Angular Application and this works fine in dev mode. The moment I build the project (ng build --prod), I receive the following error:

Property 'refine' does not exist on type 'object'.

CustomWidget.ts

import { Component, Inject, forwardRef, OnInit } from '@angular/core';
import { BaseWidget, NgAisInstantSearch, } from 'angular-instantsearch';
import { connectSearchBox } from 'instantsearch.js/es/connectors';

@Component({
  selector: 'app-search-box',
  templateUrl: './search-box.component.html',
  styleUrls: ['./search-box.component.css']
})
export class SearchBoxComponent extends BaseWidget {

  constructor(
    @Inject(forwardRef(() => NgAisInstantSearch))
    public instantSearchParent
  ) {
    super('SearchBox');
  }
  public ngOnInit() {
    this.createWidget(connectSearchBox);
    super.ngOnInit();
  }
}

CustomWidget..html

<div class="relative p-4 px-8">
  <input type="search" (input)="state.refine($event.target.value)">
</div>

Note - On the connectSearchBox import, there are 3 tiny dots just after from. Upon hovering, the following message is present:

[ts] Could not find a declaration file for module 'instantsearch.js/es/connectors'. '/node_modules/instantsearch.js/es/connectors/index.js' implicitly has an 'any' type.

Looking in the node modules there's instantSearch.js/es/connectors followed by further folders for each component type by the looks of, such as 'search-box'

BaseWidget.d.ts

import { OnDestroy, OnInit } from '@angular/core';
export declare class Widget {
    init: () => void;
    getConfiguration: () => object;
    render: (params: {
        templatesConfig: object;
        state: object;
        results: {}[];
        createURL: (value: any) => string;
        instantSearchInstance: object;
    }) => void;
    dispose: (params: {
        helper: object;
        state: object;
    }) => object | void;
}
export declare type Connector = (renderFn: (state: object, isFirstRendering: boolean) => void, unmountFn: () => void) => (widgetOptions?: object) => Widget;
export declare class BaseWidget implements OnInit, OnDestroy {
    instantSearchParent: any;
    autoHideContainer?: boolean;
    widget?: Widget;
    state?: object;
    cx: Function;
    constructor(widgetName: string);
    createWidget(connector: Connector, options?: object): void;
    ngOnInit(): void;
    ngOnDestroy(): void;
    updateState: (state: {}, isFirstRendering: boolean) => void | Promise<void>;
    getItemClass(item: {
        isRefined?: boolean;
    }): any;
}

Here you have two issues. First one is related to `state` object and second is related to import of `connectSearchBox`. Better you share code of `BaseWidget` and the component and actual path of '`nstantsearch.js/es/connectors`. — Sunil Singh, Dec 04 '18 at 08:42
Hey @SunilSingh - Thanks for the response! - I've updated the original post. The component .ts and .html are already there. I've copied the BaseWidget.d.ts from the Angular Instant Search node modules folder. As for the path of connectors, I've provided a little info, but I essentially copied that line from their github. Thanks again for the help. — Que, Dec 04 '18 at 09:34

score 1 · Answer 1 · answered Dec 04 '18 at 10:03

Resolved. Terrible on my part, I missed a section of documentation here:

https://community.algolia.com/angular-instantsearch/guides/customize-widgets.html - Section #3. Render from the state

The following needed to be added into the custom widget.

state: {
   refine: (value: string) => void;
}

Angular Instant Search Custom Widget - Property 'refine' does not exist on type 'object'

1 Answers1