Using the <Video/> component throws Suspense boundary Unhandled Runtime Error

[GorvGoyl]

This is the error I get when I use the component. I followed https://next-video.dev/docs to set it up. If I remove the component then error is gone.

Error: This Suspense boundary received an update before it finished hydrating. This caused the boundary to switch to client rendering. The usual way to fix this is to wrap the original update in startTransition.

here's how I'm using it:

"next": "14.1.4" & pages router

Let me know if you need more details.

[GorvGoyl]

ps: react strict mode is enabled

[luwes]

thanks for reporting. could you provide an online demo or codesandbox?
that would help a lot in debugging.

Here you can fork
https://codesandbox.io/p/devbox/next-video-mux-j9nn73?file=%2F.codesandbox%2Ftasks.json
or
https://github.com/muxinc/next-video/tree/main/examples/default-provider
https://next-video-demo.vercel.app/

[GorvGoyl]

It's causing the issue in my production app and I can't share the source code. Happy to help in other ways.

[GorvGoyl]

It seems like suspense is not handled correctly in your library. I found a workaround (https://chat.openai.com/share/c75ba523-8567-4800-ae97-0a8674f9330e), but this is not ideal for library users since the underlying library is supposed to handle this. Looking forward to the fix from the library side.

[coderInwind]

I found a way to fix the error: