fix: Suppress hydration warnings caused by browser extensions (DarkRe… #27
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
There was a problem hiding this comment.
Pull request overview
This PR addresses hydration warnings caused by browser extensions like DarkReader by adding the suppressHydrationWarning attribute to elements that may be modified by these extensions during runtime.
Key Changes:
- Added
suppressHydrationWarningto the roothtmlandbodyelements in the layout - Added
suppressHydrationWarningto the logo SVG and its child path elements in the Navbar component
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| src/app/layout.tsx | Added suppressHydrationWarning to html and body tags to suppress warnings from browser extensions modifying these elements |
| src/components/Navbar.tsx | Added suppressHydrationWarning to SVG logo and its child path elements to prevent hydration warnings |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+51
to
+52
| <path suppressHydrationWarning d="M164.575 138.442C177.595 131.028 190.823 131.922 202.919 140.826C209.388 145.589 213.525 151.19 215.743 157.428C217.923 163.558 218.34 170.569 216.967 178.397C216.04 180.449 215.12 182.948 214.453 184.522C213.59 186.56 212.785 188.049 211.813 189.128C207.135 194.32 201.968 199.119 196.353 202.583C177.503 214.206 158.277 225.119 139.038 236.398C122.071 246.038 105.081 255.668 88.1221 265.343C79.3282 270.359 70.8526 275.391 62.1885 280.3L58.4619 282.396C40.5079 292.417 19.363 286.57 9.21191 268.969H9.21094C-0.422102 252.268 5.09845 230.576 22.3037 220.532C69.5919 192.931 116.999 165.533 164.575 138.442Z" fill="#E94436" stroke="black" strokeWidth="9" /> | ||
| <path suppressHydrationWarning d="M36.8911 215.636C39.0871 215.365 40.7791 215.318 42.1997 215.621C49.0358 217.077 55.7766 219.15 61.5825 222.281C81.0734 232.792 100.137 243.988 119.523 255.009H119.524C136.356 264.881 153.193 274.783 170.051 284.633V284.632C180.041 290.47 189.837 295.938 199.647 301.792V301.791C217.304 312.332 222.813 333.566 212.645 351.156V351.157C203.147 367.591 182.123 373.725 164.965 364.488L164.152 364.036L146.327 353.844C104.749 330.04 63.2664 306.073 21.9233 281.873C8.99308 274.304 3.15327 262.401 4.81689 247.474C5.70649 239.489 8.48863 233.105 12.7817 228.065C17.0004 223.113 22.8619 219.245 30.3276 216.52C32.5694 216.298 35.192 215.846 36.8911 215.636Z" fill="#4385F3" stroke="black" strokeWidth="9" /> |
There was a problem hiding this comment.
The suppressHydrationWarning attribute should not be added to individual path elements within the SVG. When you add suppressHydrationWarning to the parent svg element (line 48), it automatically applies to all its children. Adding it redundantly to each path element is unnecessary and goes against React best practices. Remove suppressHydrationWarning from all four path elements and rely on the parent SVG's suppressHydrationWarning attribute to suppress hydration warnings for the entire SVG tree.
Suggested change
| <path suppressHydrationWarning d="M164.575 138.442C177.595 131.028 190.823 131.922 202.919 140.826C209.388 145.589 213.525 151.19 215.743 157.428C217.923 163.558 218.34 170.569 216.967 178.397C216.04 180.449 215.12 182.948 214.453 184.522C213.59 186.56 212.785 188.049 211.813 189.128C207.135 194.32 201.968 199.119 196.353 202.583C177.503 214.206 158.277 225.119 139.038 236.398C122.071 246.038 105.081 255.668 88.1221 265.343C79.3282 270.359 70.8526 275.391 62.1885 280.3L58.4619 282.396C40.5079 292.417 19.363 286.57 9.21191 268.969H9.21094C-0.422102 252.268 5.09845 230.576 22.3037 220.532C69.5919 192.931 116.999 165.533 164.575 138.442Z" fill="#E94436" stroke="black" strokeWidth="9" /> | |
| <path suppressHydrationWarning d="M36.8911 215.636C39.0871 215.365 40.7791 215.318 42.1997 215.621C49.0358 217.077 55.7766 219.15 61.5825 222.281C81.0734 232.792 100.137 243.988 119.523 255.009H119.524C136.356 264.881 153.193 274.783 170.051 284.633V284.632C180.041 290.47 189.837 295.938 199.647 301.792V301.791C217.304 312.332 222.813 333.566 212.645 351.156V351.157C203.147 367.591 182.123 373.725 164.965 364.488L164.152 364.036L146.327 353.844C104.749 330.04 63.2664 306.073 21.9233 281.873C8.99308 274.304 3.15327 262.401 4.81689 247.474C5.70649 239.489 8.48863 233.105 12.7817 228.065C17.0004 223.113 22.8619 219.245 30.3276 216.52C32.5694 216.298 35.192 215.846 36.8911 215.636Z" fill="#4385F3" stroke="black" strokeWidth="9" /> | |
| <path d="M164.575 138.442C177.595 131.028 190.823 131.922 202.919 140.826C209.388 145.589 213.525 151.19 215.743 157.428C217.923 163.558 218.34 170.569 216.967 178.397C216.04 180.449 215.12 182.948 214.453 184.522C213.59 186.56 212.785 188.049 211.813 189.128C207.135 194.32 201.968 199.119 196.353 202.583C177.503 214.206 158.277 225.119 139.038 236.398C122.071 246.038 105.081 255.668 88.1221 265.343C79.3282 270.359 70.8526 275.391 62.1885 280.3L58.4619 282.396C40.5079 292.417 19.363 286.57 9.21191 268.969H9.21094C-0.422102 252.268 5.09845 230.576 22.3037 220.532C69.5919 192.931 116.999 165.533 164.575 138.442Z" fill="#E94436" stroke="black" strokeWidth="9" /> | |
| <path d="M36.8911 215.636C39.0871 215.365 40.7791 215.318 42.1997 215.621C49.0358 217.077 55.7766 219.15 61.5825 222.281C81.0734 232.792 100.137 243.988 119.523 255.009H119.524C136.356 264.881 153.193 274.783 170.051 284.633V284.632C180.041 290.47 189.837 295.938 199.647 301.792V301.791C217.304 312.332 222.813 333.566 212.645 351.156V351.157C203.147 367.591 182.123 373.725 164.965 364.488L164.152 364.036L146.327 353.844C104.749 330.04 63.2664 306.073 21.9233 281.873C8.99308 274.304 3.15327 262.401 4.81689 247.474C5.70649 239.489 8.48863 233.105 12.7817 228.065C17.0004 223.113 22.8619 219.245 30.3276 216.52C32.5694 216.298 35.192 215.846 36.8911 215.636Z" fill="#4385F3" stroke="black" strokeWidth="9" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
…ader)