A component suspended while responding to synchronous input in version 1.31.9

[jmargeta]

Describe the bug

Hi, thanks for the excellent library! After the update to the latest 1.31.9 we are getting: "A component suspended while responding to synchronous input. This will cause the UI to be replaced with a loading indicator. To fix, updates that suspend should be wrapped with startTransition."

Is there any migration strategy to use this version (all works perfectly with 1.31.8)?

Your Example Website or App

-

Steps to Reproduce the Bug or Issue

1. Update to 1.31.9

Expected behavior

App loads

Screenshots or Videos

Platform

• OS: Windows
• Browser: Chrome, Firefox
• Version: Router 1.31.9, React 18.2.0

Additional context

No response

[tonywei92]

@anyone Use this repo to reproduce: https://github.com/tonywei92/tanstack-react-router-sample-error-1.31.9

[aromko]

Hey. I got the same error after upgrade. How can it be fixed?

[jmargeta]

The stackblitz example for authenticated routes seems to be currently broken as well: https://tanstack.com/router/latest/docs/framework/react/examples/authenticated-routes

[kaulshashank]

Facing the same issue here +1. Was attempting to replicate the authenticated-routes example in a new repo.

@jmargeta what version did you upgrade from? I am new to using this project and want to switch to a version where this wasn't happening.

Can confirm it's not happening on v1.31.7

[j3sch]

I get the same error. For me the issue was: @tanstack/router-devtools": "~1.31.1", I just removed the tilde, now everything works again

[tforssander]

Same issue here, downgrading @tanstack/react-router from 1.31.9 to 1.31.8 seems to resolve the issue.

[jmargeta]

A new release 1.31.10 seems to fix this (https://github.com/TanStack/router/commit/036c12ea72c9930e3b7b6ac8e74df508402fd65a)

Thanks a lot, @tannerlinsley, you are incredible!

[tonywei92]

@jmargeta still error on my side, tried install the latest version 1.31.23

[mstosio]

Still facing this issue with latest version

[jmargeta]

@stosio, is it still an issue for you after the latest release? Shall I reopen this issue?

[mstosio]

@jmargeta Yesterday, I was configuring a router from scratch based on the documentation and encountered the same issue. Is it possible that the fix hasn't been published yet?

[visualjerk]

This error still occurs with the latest version 1.32.5, please reopen the issue.

Workaround: Wrap the RouterProvider in a Suspense

<Suspense>
  <RouterProvider router={router} />
</Suspense>

[TkDodo]

can you show a reproduction please?

the mentioned example about authenticated routes works fine:

https://tanstack.com/router/v1/docs/framework/react/examples/authenticated-routes

[visualjerk]

Sure, it looks like the issue occurs in combination with Tanstack Query. Here is a minimal reproduction example:

https://stackblitz.com/edit/tanstack-router-uwrknv?file=src%2Fmain.tsx

As this combination is different from the initial bug description, should I rather create a new issue for it?

[TkDodo]

@visualjerk you're calling useQuery outside of the RouterProvider, which I'm not sure why you would do that?

I think with TanStack router, the only thing you should be rendering in root.render is:

<RouterProvider router={router} />

and then the rest should go into the root layout.

[visualjerk]

In our case, we just needed a route independent place to use this query. Putting it in the root layout is a good alternative, thanks for the clarification!