Using signals package with react router results in a wierd jsx error

I tried using @preact/signals-react in a project with react-router 6 but I got that error which doesn’t make any sense to me, the error is complaining about react-router but originates from @preact/signals-react and only happens when I import/use anything from @preact/signals-react

here is a link https://stackblitz.com/edit/react-router-starter-gfxkdm?file=components%2FHome.js to reproduce the error, try commenting out the signal import/usage in Home.js and everything will work fine

I think it could be related to the patches to JSX factories, which breaks the react-router check for the <Route/> element type somehow, if I used it with the routing config approach from react-router 6.4 it works fine

[developit]

@lennerd the fix may be to go back to injecting updaters into components via react internals rather than wrapping all components. I’ve been using and testing a local version of that approach this week, and it’s working in dev and prod builds using React Router 6.4.

[salamaashoush]

couldn’t find a workaround for this error so I had to use the @preact/signals-core package with this custom hook

export function useSignalValue<T>(signal: Signal<T>) {
  const [value, setValue] = useState<T>(() => signal.peek());
  useEffect(() => signal.subscribe(setValue), [signal]);
  return value;
}

that allowed me to update the signals from anywhere and then where I use that hook react will rerender because of the local state update

it is not the best/optimal solution but hopefully, this issue with react-router could be fixed