Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[UI-REACT]: TonConnectUIProvider cause hydration warnings in Next.js dev server #271

Open
baadev opened this issue Oct 17, 2024 · 2 comments
Open

[UI-REACT]: TonConnectUIProvider cause hydration warnings in Next.js dev server #271

baadev opened this issue Oct 17, 2024 · 2 comments
Assignees
@thekiba
Labels
bug Something isn't working

Comments

@baadev
Copy link

baadev commented Oct 17, 2024

Describe the bug

Adding TonConnectUIProvider in Next.js app within dev build causes Warning: Extra attributes from the server: ontouchstart,style.

Expected behavior

Adding TonConnectUIProvider should not cause any hydration warnings

Current behavior

Adding TonConnectUIProvider causes hydration warnings
image

Steps to Reproduce

  1. add TonConnectUIProvider to your Next.js project within body tag as separate client component
  2. run dev server: npm run dev
  3. check the console of your browser

Environment

MacOS 15.0 (24A335)

Safari Version 18.0 (20619.1.26.31.6)
or
Chrome Version 129.0.6668.59 (Official Build) (arm64)

"@tonconnect/ui-react": "^2.0.9",
"next": "14.2.15",
"react": "^18",
"react-dom": "^18"

Additional context

This issue is not visible for production build.
@baadev baadev added the bug Something isn't working label Oct 17, 2024
@srpiroliro
Copy link

temporal solution is to make sure that the provider is on "use client" and to add suppressHydrationWarning to the html tag <html lang="en" suppressHydrationWarning>

@baadev
Copy link
Author

baadev commented Jan 16, 2025

temporal solution is to make sure that the provider is on "use client" and to add suppressHydrationWarning to the html tag <html lang="en" suppressHydrationWarning>

That’s what I did, thank you. I was hoping for a better solution or fix than simply suppressing the warning, but this approach does work anyway.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@thekiba thekiba

Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@thekiba @baadev @srpiroliro