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

[Rachidba]

🐛 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

1. Create profile and configure index in algolia

2. 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",

3. Create the above files (SeachComponent.tsx and Page.tsx) and replace App_ID, Key and index name by yours

4. Run project

5. Visite the created page (In my case it was in /search)

Live reproduction

https://codesandbox.io/p/sandbox/next-js-forked-kc85nf?workspaceId=c5c0397d-5c67-4d75-81a8-14346ea7eb77&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522cm0rg9ksz00063b6jbwdtlf76%2522%252C%2522sizes%2522%253A%255B100%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522cm0rg9ksz00023b6j4fypxy5c%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522cm0rg9ksz00033b6je3khbyng%2522%257D%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522cm0rg9ksz00053b6jed0x3qvb%2522%257D%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522cm0rg9ksz00023b6j4fypxy5c%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cm0rg9ksz00013b6jiejy1gfx%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Findex.js%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522id%2522%253A%2522cm0rgabav001j3b6jpinp5i9e%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A4%252C%2522startColumn%2522%253A1%252C%2522endLineNumber%2522%253A4%252C%2522endColumn%2522%253A1%257D%255D%252C%2522filepath%2522%253A%2522%252FHello.js%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522cm0rg9ksz00023b6j4fypxy5c%2522%252C%2522activeTabId%2522%253A%2522cm0rgabav001j3b6jpinp5i9e%2522%257D%252C%2522cm0rg9ksz00053b6jed0x3qvb%2522%253A%257B%2522id%2522%253A%2522cm0rg9ksz00053b6jed0x3qvb%2522%252C%2522activeTabId%2522%253A%2522cm0rg9plv000o3b6j2t07c5di%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cm0rg9ksz00043b6juw8u6fm5%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%257D%252C%257B%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522id%2522%253A%2522cm0rg9plv000o3b6j2t07c5di%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%255D%257D%252C%2522cm0rg9ksz00033b6je3khbyng%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522cm0rg9ksz00033b6je3khbyng%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Afalse%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

💭 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

• I agree to follow this project's Code of Conduct

[kamami]

I have the same issue...

[Rachidba]

@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;