algolia / algolia/instantsearch

DynamicWidgets does not work with Remix Link

Open
#5,552 1 comment 2 reactions 0 assignees View on GitHub
Library: React InstantSearch ≥ 7
Dominant language
TypeScript
Stars
4.1k
Forks
554
Avg merge
1d 11h
Merged PRs (30d)
51

Description

### 🐛 Current behavior

When the component which is passed to the `getServerState` method contains `DynamicWidgets` and `Link` from “@remix-run/react” components it causes the app to break with the error: “useHref() may be used only in the context of a component.”. If `DynamicWidgets` or `Link` is removed then everything seems fine

### 🔍 Steps to reproduce

1. Go to [https://codesandbox.io/p/sandbox/lucid-cerf-glr0tu](https://codesandbox.io/p/sandbox/lucid-cerf-glr0tu)
2. Everything should work fine, you can see filters and hits
3. In `app/components/Search.tsx` change line 97 from `` to `` (same component just wrapped with Link)
4. "Error: useHref() may be used only in the context of a component."
5. Now delete ``, refresh and the app is working again (just without filters)

### Live reproduction

https://codesandbox.io/p/sandbox/lucid-cerf-glr0tu

### 💭 Expected behavior

DynamicWidgets should work with Remix Link

### Package version

react-instantsearch-hooks-web 6.41.0, react-instantsearch-hooks-server 6.41.0

### Operating system

macOS

### Browser

Chrome

### Code of Conduct

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

Contributor guide

Open the contributing guide

Research direction

Start with the linked CodeSandbox and inspect app/components/Search.tsx, especially the getServerState setup, DynamicWidgets, and the Link-wrapped hit component. Reproduce the router-context error, then trace the relevant React InstantSearch server integration; done means DynamicWidgets and Remix Link work together without the error.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.