InstantSearch w/ NextJs App Router - Cannot read properties of undefined (reading 'transporter')

Rachidba commented 2 months ago

🐛 Current behavior

Hello there, I'm trying to use algolia's instantSearch in my NextJs (App Routing) project. Once I add a new widget, I get the error: Internal error: TypeError: Cannot read properties of undefined (reading 'transporter')

Here is my SeachComponent.TSX

'use client';
import { liteClient as algoliasearch } from 'algoliasearch/lite';
import { SearchBox } from 'react-instantsearch';
import { InstantSearchNext } from 'react-instantsearch-nextjs';

const searchClient = algoliasearch(
  'XXXXXX',
  'XXXXXXXXXXXXXXXX'
);

const SearchComponent = () => {
  return (
    <InstantSearchNext
      indexName="XXXXX"
      searchClient={searchClient}
      future={{ preserveSharedStateOnUnmount: true }}
      routing
    >
      <SearchBox />
    </InstantSearchNext>
  );
};

export default SearchComponent;

And here is it's usage inside the SSR Page, page.tsx:

import SearchComponent from '@/components/SearchComponent';

export const dynamic = 'force-dynamic';

export default function Page() {
  return <SearchComponent />;
}

The detailed error:

 ⨯ node_modules/algoliasearch/dist/lite/builds/node.js (241:18) @ transporter
 ⨯ Internal error: TypeError: Cannot read properties of undefined (reading 'transporter')
    at search (./node_modules/algoliasearch/dist/lite/builds/node.js:227:25)
    at eval (./node_modules/instantsearch.js/es/lib/utils/hydrateSearchClient.js:161:35)
    at Object.get (./node_modules/@algolia/client-common/dist/common.esm.js:213:27)
    at client.search (./node_modules/instantsearch.js/es/lib/utils/hydrateSearchClient.js:155:54)
    at Object.search (./node_modules/react-instantsearch-nextjs/dist/es/InitializePromise.js:94:35)
    at AlgoliaSearchHelper._search (./node_modules/algoliasearch-helper/src/algoliasearch.helper.js:1275:21)
    at AlgoliaSearchHelper.searchOnlyWithDerivedHelpers (./node_modules/algoliasearch-helper/src/algoliasearch.helper.js:146:10)
    at TriggerSearch (./node_modules/react-instantsearch-nextjs/dist/es/TriggerSearch.js:14:173)

Many thanks for you help

🔍 Steps to reproduce

Create profile and configure index in algolia
In a working NextJs project configured with App Routing, install the following dependencies:

"algoliasearch": "^5.3.0",
"react-instantsearch": "^7.13.0",
"react-instantsearch-nextjs": "^0.3.10",
"@types/react-instantsearch": "^6.10.4",
"@types/react-instantsearch-core": "^6.26.10"
"@types/react-instantsearch-dom": "^6.12.8",

Create the above files (SeachComponent.tsx and Page.tsx) and replace App_ID, Key and index name by yours
Run project
Visite the created page (In my case it was in /search)

Live reproduction

💭 Expected behavior

I was experting that the page will be rendered with a working searchBox

Package version

"algoliasearch": "^5.3.0", "react-instantsearch": "^7.13.0", "react-instantsearch-nextjs": "^0.3.10", "@types/react-instantsearch": "^6.10.4", "@types/react-instantsearch-core": "^6.26.10", "@types/react-instantsearch-dom": "^6.12.8"

Operating system

No response

Browser

No response

Code of Conduct

[X] I agree to follow this project's Code of Conduct

kamami commented 2 months ago

I have the same issue...

Rachidba commented 2 months ago

@kamami FYI, I have downgraded Algoliasearch to version 4.24.0, and it's now working. The problem seems to be with version 5 of Algoliasearch. That said, this does not resolve the underlying issues, but it is a workaround to avoid the error.

I have also changed this => import { liteClient as algoliasearch } from algoliasearch/lite; By this => import algoliasearch from algoliasearch/lite;

algolia / instantsearch