Type issue with custom widget

[coltmans]

I folks, I took over a project which is using Algolia. Now I want to update all the packages, including yours (instantsearch.js 4.74.0, search-insights 2.17.1, Typescript 4.9.5). But now I'm getting Type issues in creating a custom widget. As I see, the previous devs were following the docs here to build it. Code below

Since I didn't found anything about that, I guess this might some setup issue? That's why I didn't add an Issue.

I'm getting following TS error:

TS2322: Type
{   eventName: string;   index: string;   filters: string[]; }
is not assignable to type
WithAdditionalParams<InsightsSearchClickEvent>[] | WithAdditionalParams<InsightsClickObjectIDsEvent>[] | ... 5 more ... | WithAdditionalParams<...>[]
Object literal may only specify known properties, and eventName does not exist in type
WithAdditionalParams<InsightsSearchClickEvent>[] | WithAdditionalParams<InsightsClickObjectIDsEvent>[] | ... 5 more ... | WithAdditionalParams<...>[]
insights.d.ts(15, 5): The expected type comes from property payload which is declared here on type InsightsEvent<InsightsMethod>

This is the code. Additional info, before the update of the packages, the Connector was imported from import react-instantsearch/node_modules/instantsearch.js

import { SearchResults } from 'algoliasearch-helper';

import { FacetName } from 'src/components/UI/molecules/filterBar/FilterBar.types';
import { ALGOLIA_CUSTOM_WIDGET_ID } from 'src/components/UI/molecules/filterElement/connector/widgetIDs';
import { isSharedAttributesFacet } from 'src/components/UI/molecules/filterElement/constants';

import type { Connector } from 'instantsearch.js';

export type SharedRefinementListConnectorParams = {
  facetName: FacetName;
  sortBy: string[];
  operator?: 'or' | 'and';
};

type SharedRefinementListRenderState = {
  items: SearchResults.FacetValue[];
  refine(value: string): void;
};

type SharedRefinementListWidgetDescription = {
  $$type: typeof ALGOLIA_CUSTOM_WIDGET_ID.SHARED_REFINEMENT_LIST;
  renderState: SharedRefinementListRenderState;
  indexRenderState: {
    sharedRefinementList: {
      [facetName: string]: SharedRefinementListRenderState;
    };
  };
  indexUiState: {
    sharedRefinementList: {
      [facetName: string]: string[];
    };
  };
};

type SharedRefinementListConnector = Connector<
  SharedRefinementListWidgetDescription,
  SharedRefinementListConnectorParams
>;

// eslint-disable-next-line
//@ts-ignore
export const connectSharedRefinementList: SharedRefinementListConnector = (
  renderFn,
  unmountFn = noop,
) => {
  return function sharedRefinementList({ facetName, sortBy, operator = 'or' }) {
    type ConnectorState = {
      refine?(value: string): void;
      sendEvent?(
        eventType: 'view' | 'click' | 'conversion',
        facetValue: string,
        eventName?: string,
      ): void;
    };

    // An empty `connectorState` object is used to store information
    // that needs to be shared across multiple method calls.
    const connectorState: ConnectorState = {};

    /**
     * HELPER & Settings
     */

    const isDisjunctive = operator === 'or'; // Handles disjunctive or conjunctive refinements

    const isSharedFacet = isSharedAttributesFacet(facetName); //Shared attributes currently only sharedAttributes.groupFacet & sharedAttributes.pattern

    /**
     * PrimaryFacetName will always be triggered on refinement
     * a secondaryFacetName may be triggered on sharedFacets + styleCode Indices
     * See readme.plantuml for details
     */
    const primaryFacetName = isSharedFacet ? `color.${facetName.split('.')[1]}` : facetName; // Use Shared on

    return {
      $$type: ALGOLIA_CUSTOM_WIDGET_ID.SHARED_REFINEMENT_LIST,
      init(initOptions) {
        const { instantSearchInstance, helper } = initOptions;

        /** Initialize usage of primaryFacet & secondaryFacet
         * ? only necessary on SharedAttributes I think
         */

        if (isSharedFacet) {
          if (isDisjunctive) {
            if (!helper.state || helper.state.disjunctiveFacets.indexOf(primaryFacetName) < 0) {
              helper.state.disjunctiveFacets.push(primaryFacetName);
            }
            helper.state.disjunctiveFacets.push(facetName); // Needs to always be there, so that data can be fetched
          } else {
            if (!helper.state.facets || helper.state.facets?.indexOf(primaryFacetName) < 0) {
              if (!helper.state.facets) helper.state.facets = [];

              helper.state.facets?.push(primaryFacetName);
            }
            helper.state.facets.push(facetName); // Needs to always be there, so that data can be fetched
          }
        }

        renderFn({ ...this.getWidgetRenderState(initOptions), instantSearchInstance }, true);
      },
      render(renderOptions) {
        const { instantSearchInstance } = renderOptions;

        renderFn({ ...this.getWidgetRenderState(renderOptions), instantSearchInstance }, false);
      },
      getWidgetRenderState(widgetParams) {
        const { results, helper, instantSearchInstance } = widgetParams;

        /**
         * Define custom refine method
         */
        if (!connectorState.refine) {
          connectorState.refine = (value) => {
            /**
             * Toggle the explicit facet instead of the shared facet
             */

            helper.toggleFacetRefinement(primaryFacetName, value);

            return helper.search();
          };
        }

        /**
         * Define custom sendEvent for Algolia Insights
         */
        if (!connectorState.sendEvent) {
          connectorState.sendEvent = (eventType, facetValue, eventName = 'Filter applied') => {
            if (helper.state.isDisjunctiveFacetRefined(facetName, facetValue)) {
              instantSearchInstance.sendEventToInsights({
                insightsMethod: 'clickedFilters',
                widgetType: this.$$type,
                eventType,
                payload: {
                  eventName,
                  index: helper.getIndex(),
                  filters: [`${facetName}:-${facetValue}`],
                },
                attribute: facetName,
              });
            }
          };
        }

        if (!results) {
          return {
            items: [],
            sendEvent: connectorState.sendEvent,
            refine: connectorState.refine,
            widgetParams: { ...widgetParams, helper, results },
          };
        }

        const items =
          (
            results.getFacetValues(isSharedFacet ? `color.${facetName.split('.')[1]}` : facetName, {
              sortBy,
            }) as SearchResults.FacetValue[]
          )?.map((item) => ({ ...item, label: item.name })) || [];

        return {
          items,
          sendEvent: connectorState.sendEvent,
          refine: connectorState.refine,
          widgetParams: { ...widgetParams, helper, results },
        };
      },

      getRenderState(renderState, renderOptions) {
        return {
          ...renderState,
          sharedRefinementList: {
            ...renderState.sharedRefinementList,
            [primaryFacetName]: this.getWidgetRenderState(renderOptions),
          },
        };
      },
    };
  };
};

/**
 * HELPER FUNCTIONS
 */
const noop = () => {
  console.log('noop');
};

Here the tsconfig:

{
  "compilerOptions": {
    "allowJs": true,
    "baseUrl": ".",
    "downlevelIteration": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "module": "esnext",
    "moduleResolution": "node",
    "noEmit": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "strict": false,
    "strictNullChecks": true,
    "target": "es6",
    "types": [
      "node"
    ],
    "paths": {
      "@graphql-types@": [
        "node_modules/@types/graphql-let/__generated__/__types__"
      ]
    },
    "incremental": true
  },
  "include": [
    "next-env.d.ts",
    "graphql.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules",
    ".cache",
    "test/codeceptjs",
    "algolia",
    "sitemap",
    "review-feed",
    "infra/functions/",
    "storyblok/plugins",
    "customer-mail",
    "cms-invalidation",
    "deployment-notification/",
    "monitoring-notification/"
  ]
}