leather-io/extension

Resolve conflict with OKX wallet (hydration error with <Suspense> component in NextJS)

Opened this issue · 3 comments

xie-yue commented

checked existed issues

Yes, I have checked existed issues.

what happend

With Leather wallet installed, nextjs app throw a hydration error if content was set under a Suspense component.
If I uninstall leather or disabled it, the error disappears.
hydration_error_leather

demo repo

https://github.com/xie-yue/my-nextjs-app
It's simply a nextjs created by cli. I just add a component under

xie-yue commented

I found it just happened when I installed OKX wallet and Leather wallet at same time.
If I disabled one of them, the error disappears.

markmhendrickson commented

Thanks for the report! This seems at first glance related to server-side rendering. OKX may be doing something unexpected when another extension like Leather is installed. Can you disable server-side rendering and see what happens when trying to use the app when both are installed?

  • 👍1
xie-yue commented

@markmhendrickson
I moved the Suspense to a client component, and the error has gone.
SSR should be the point.

here is the commit.
xie-yue/my-nextjs-app@462acad

  • ❤️1