fix: Resolve hydration error on news blog pages

[Ruthwik000]

Pull Request: Suppress React DOM Nesting Warnings

🔗 Related Issue

Fixes #497 - Hydration Error on News Blog Pages

📝 Description

This PR resolves React DOM nesting warnings that appear in the browser console when loading news blog pages with rich markdown content. These warnings occur due to invalid HTML nesting where block elements like <div>, <figure>, and <iframe> are rendered inside <p> elements through markdown processing.

Warnings Fixed:

In HTML, <div> cannot be a descendant of <p>. This will cause a hydration error.
<p> cannot contain a nested <div>.
Warning: validateDOMNesting(...): <img> cannot appear as a child of <p>.

Key Changes:

• Added console warning suppression in main.tsx for development mode only
• Filters out specific React DOM nesting validation warnings
• Maintains all other error/warning visibility for legitimate issues
• Keeps production builds completely unaffected
• Provides cleaner development console experience

🔄 Type of Change

• 🐛 Bug Fix (console warnings)
• 🛠️ Developer Experience Improvement
• 🧹 Code Quality Enhancement

📷 Visual Changes

Before: Console shows hydration error when loading news pages

After: Clean console output with no hydration errors

✅ Test Cases

1. ✅ Load news blog posts with images and videos
2. ✅ Verify console shows no DOM nesting warnings
3. ✅ Confirm all functionality works (copy buttons, image zoom, etc.)
4. ✅ Test that legitimate errors still appear in console
5. ✅ Verify production builds are unaffected
6. ✅ Check that suppression only runs in development mode

🔧 Technical Implementation

Root Cause:
ReactMarkdown processes rich markdown content containing images, videos, and other block elements, which can result in invalid HTML nesting when these elements are placed inside paragraph tags. React's DOM validation detects this and logs warnings.

Solution Approach:
Instead of modifying the complex markdown rendering logic, this PR implements a targeted console warning suppression that:

1. Intercepts console.error and console.warn in development mode
2. Filters out specific DOM nesting warnings using pattern matching
3. Allows all other warnings/errors to display normally
4. Only affects development environment (import.meta.env.DEV)
5. Keeps production builds pristine with no console overrides

Code Changes:

// In main.tsx - Development-only warning suppression
if (import.meta.env.DEV) {
  const originalError = console.error;
  const originalWarn = console.warn;
  
  // Filter out DOM nesting warnings while preserving other messages
  console.error = (...args: unknown[]) => {
    const message = args.join(' ');
    const shouldSuppress = /* pattern matching for DOM warnings */;
    if (!shouldSuppress) {
      originalError.apply(console, args);
    }
  };
}

♿ Accessibility

• No accessibility impact - warnings were console-only
• All existing functionality preserved
• HTML structure remains unchanged
• Screen reader compatibility maintained

📋 PR Checklist

• My code follows the project's coding style guidelines
• I have tested these changes locally
• My changes generate no new warnings or console errors
• All existing tests pass successfully
• I have checked for and resolved any merge conflicts
• TypeScript linting passes without errors
• Code formatting is consistent (prettier)

💭 Additional Notes

Why This Approach?

1. Minimal Impact: Only affects console output in development
2. Preserves Functionality: All blog features work exactly as before
3. Targeted Solution: Specifically addresses the reported warnings
4. Safe Implementation: Production builds remain completely unaffected
5. Maintainable: Simple, focused code that's easy to understand

Alternative Approaches Considered:

• ❌ Restructuring MarkdownRenderer: Too complex, risk of breaking functionality
• ❌ Changing HTML structure: Could affect styling and layout
• ❌ Modifying ReactMarkdown config: Limited control over nested content
• ✅ Console suppression: Clean, targeted, minimal risk

Impact:

• ✅ Clean development console experience
• ✅ No functional changes to blog pages
• ✅ Improved developer productivity
• ✅ Maintained code stability
• ✅ Zero impact on end users

---

📚 Reviewer Notes

This PR addresses developer experience by cleaning up console noise while maintaining all existing functionality. The solution is conservative and targeted, affecting only development console output without touching the core markdown rendering logic.

Testing: Load any news article with images/videos (e.g., /news/all/2025-09-12-gsoc-25-bishoy-wadea-final-report) and verify the console is clean while all features work normally.

[github-actions]

❌ Checks Failed

Status: 🚫 Not ready to merge

Please fix the following issues before merging:

📝 Code Linting Failed

Issue: Code formatting or style violations detected.

Specific problems:

• Code formatting issues detected

How to fix:

Platform	Command	Description
🐧 Unix/macOS/Linux	npm run format	Auto-fix all formatting issues
🪟 Windows	npm run format:file <filename>	Fix specific files
🔍 Check Only	npm run format:check	Check formatting without fixing

Need help with linting? Check out the Linting Guide for Windows Users for detailed instructions.

---

🛠️ Next Steps

1. Fix the issues mentioned above
2. Test locally to ensure everything works
3. Push your fixes to this branch
4. Wait for re-check - This bot will automatically run again

🤖 This comment will be updated automatically when you push new commits

[github-actions]

🎉 All Checks Passed!

Status: ✅ Ready to merge

✅ Completed Workflows

Workflow	Status	Details
🔨 Continuous Integration	✅ Passed	Build completed successfully
📝 Code Linting	✅ Passed	All formatting and style checks passed

---

🚀 This PR is ready for review and can be safely merged to main branch!

Great work! Your code meets all quality standards. 👏

[Ruthwik000]

hi Maintainers !!@sa-fw-an
can you kindly review the pr and merge it

[FirePheonix]

i understood the issue. But even with your PR, I am not able to replicate the solution. as you can see, I'm still getting those issues on my local with your PR open. Maybe demonstrate further?

And also, React DOM warnings like THIS one do not stop the app from building or deploying btw. Neither does it lead to slower builds. It's not an actual Hydration error, since www-v2's blogs are pure client sided. The bundler we're using (vite) doesn’t treat this as an error - only React logs it in the browser console. And the deployment works fine. The app will still load in production.

Since we're using tags like iframes and embedding the images and videos, the React logging it on browser console is bound to occur only since these tags aren't inherently meant to be {children} of p or div tags.

for example, a blogpost with no Image/Video embeddings doesn't throw up any of those issues: (open this on your local) http://localhost:5173/news/all/2025-09-15-dmp-25-weekly-update-aman-chadha

but the one with image/video embeddings would:
http://localhost:5173/news/all/2025-09-12-gsoc-25-bishoy-wadea-final-report

For now, you can work on a method that ignores/suppresses the hydration error for now so that it's not on the browser console in the development environment

[github-actions]

❌ Checks Failed

Status: 🚫 Not ready to merge

Please fix the following issues before merging:

📝 Code Linting Failed

Issue: Code formatting or style violations detected.

Specific problems:

• TypeScript linting failed
• Code formatting issues detected

How to fix:

Platform	Command	Description
🐧 Unix/macOS/Linux	npm run format	Auto-fix all formatting issues
🪟 Windows	npm run format:file <filename>	Fix specific files
🔍 Check Only	npm run format:check	Check formatting without fixing

Need help with linting? Check out the Linting Guide for Windows Users for detailed instructions.

---

🛠️ Next Steps

1. Fix the issues mentioned above
2. Test locally to ensure everything works
3. Push your fixes to this branch
4. Wait for re-check - This bot will automatically run again

🤖 This comment will be updated automatically when you push new commits

[github-actions]

❌ Checks Failed

Status: 🚫 Not ready to merge

Please fix the following issues before merging:

📝 Code Linting Failed

Issue: Code formatting or style violations detected.

Specific problems:

• TypeScript linting failed

How to fix:

Platform	Command	Description
🐧 Unix/macOS/Linux	npm run format	Auto-fix all formatting issues
🪟 Windows	npm run format:file <filename>	Fix specific files
🔍 Check Only	npm run format:check	Check formatting without fixing

Need help with linting? Check out the Linting Guide for Windows Users for detailed instructions.

---

🛠️ Next Steps

1. Fix the issues mentioned above
2. Test locally to ensure everything works
3. Push your fixes to this branch
4. Wait for re-check - This bot will automatically run again

🤖 This comment will be updated automatically when you push new commits

[github-actions]

🎉 All Checks Passed!

Status: ✅ Ready to merge

✅ Completed Workflows

Workflow	Status	Details
🔨 Continuous Integration	✅ Passed	Build completed successfully
📝 Code Linting	✅ Passed	All formatting and style checks passed

---

🚀 This PR is ready for review and can be safely merged to main branch!

Great work! Your code meets all quality standards. 👏

[Ruthwik000]

@FirePheonix Thanks for the clarification! You're absolutely right - these are React DOM validation warnings about HTML nesting (not actual hydration errors), and they don't affect the build or deployment since this is a client-side only app.

I've implemented a solution that suppresses these specific console warnings in development mode by intercepting console.error and console.warn in main.tsx. The suppression:

Only runs in development (import.meta.env.DEV)
Filters out DOM nesting warnings like "In HTML, cannot be a descendant of "
Allows all other legitimate errors/warnings to show normally
Keeps production builds completely unaffected
This gives us a cleaner development console while maintaining all functionality. The warnings were expected due to markdown content containing block elements (images, iframes, etc.) inside paragraphs, which is common with rich content but triggers React's HTML validation.

The solution is minimal and targeted - it only suppresses the noise without hiding actual issues.
and also reverted the old solution(changes)

[Ruthwik000]

@FirePheonix @sa-fw-an kindly review the new changes