Remix useFetcher() cannot be used inside InstantSearch

[lildesert]

🐛 Current behavior

Hi,

One of the numerous frustrations I got from trying to use algolia with Remix is that I cannot use useFetcher() in any component that is a child of <InstantSearch>.
The InstantSearch component affects the react-router behavior (which Remix uses under the hood).
On new versions of Remix, the thrown error is the following useFetcher must be used inside a RouteContext. So I guess InstantSearchContext doesn't pair well with Remix RouteContext.

Small edit: it seems related to SSR since an easy workaround is to render the component only client-side with ClientOnly for example.

Thanks for any help on this!

🔍 Steps to reproduce

Just use Remix useFetcher in any component inside . See sandbox for reproduction.

Live reproduction

https://codesandbox.io/p/sandbox/remix-algolia-usefetcher-h3x9rh

💭 Expected behavior

useFetcher() works out of the box and allows me to fetch or post data.

Package version

react-instantsearch 7.2.0, remix 2.2.0, algoliasearch 4.20.0

Operating system

No response

Browser

No response

Code of Conduct

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

[aymeric-giraudet]

Hi @lildesert

The problem is the component is not being rendered in the Remix context it needs.

There are 2 ways to circumvent this :

• You can check whether you are in a Remix context before rendering ComponentWithFetcher
• You can mock a Remix context for the first SSR pass so that it doesn't throw : https://codesandbox.io/p/devbox/remix-algolia-usefetcher-forked-lppcvf?file=%2Fapp%2Froutes%2Findex.tsx%3A49%2C32