Handling Third-party lib client component that relies on ENV vars.

"use client";

import { instantMeiliSearch } from "@meilisearch/instant-meilisearch";
import { InfiniteHits, InstantSearch, SearchBox } from "react-instantsearch";
import { env } from "~/env";

export const { searchClient } = instantMeiliSearch(
  env.NEXT_PUBLIC_SEARCH_API_URL,
  env.NEXT_PUBLIC_SEARCH_API_KEY,
);

export default function InstantSearchComponent() {

  return (
    // @ts-ignore
    <InstantSearch indexName="steam-videogames" searchClient={searchClient}>
      {/* @ts-ignore */}
      <SearchBox />
      {/* @ts-ignore */}
      <InfiniteHits hitComponent={Hit} />
    </InstantSearch>
  );
}

function Hit({
  hit,
}: {
  hit: {
    id: string;
    image: string;
    name: string;
    description: string;
  };
}) {
  return (
    <article key={hit.id}>
      <img src={hit.image} alt={hit.name} />
      <h1>{hit.name}</h1>
      <p>${hit.description}</p>
    </article>
  );
}