langgenius/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-07-21 12:05:30 -04:00
Code Issues 775 Packages Projects Releases 10 Wiki Activity

Hydration warning: markdown inline image renderer nests <div> inside <p> #22234

New Issue
Open
opened 2026-02-21 20:16:15 -05:00 by yindo · 3 comments
yindo commented 2026-02-21 20:16:15 -05:00
Owner
Copy Link
Copy Source

Originally created by @lyzno1 on GitHub (Feb 16, 2026).

Summary

When rendering Markdown that includes an inline image inside a paragraph, the web app logs an invalid DOM nesting warning:

In HTML, <div> cannot be a descendant of <p>. This will cause a hydration error.

This can lead to hydration mismatch/noise in Next.js.

Environment

  • Dify web frontend
  • Next.js 16.1.5 (Turbopack)

Reproduction

  1. Open a page that renders Markdown through ReactMarkdownWrapper.
  2. Render content where a paragraph contains an inline image, for example:
    • Text before ![image](https://example.com/a.png) text after
    • or raw HTML image inside text: Text before <img src="https://example.com/a.png" alt="image" /> text after
  3. Open browser console.

Actual Result

Console warning/error appears:

  • In HTML, <div> cannot be a descendant of <p>. This will cause a hydration error.

Expected Result

Markdown renderer should output valid HTML nesting without <div> inside <p>.

Suspected Root Cause

The img renderer returns block-level wrappers even when used in paragraph (inline) context:

  • web/app/components/base/markdown-blocks/img.tsx returns <div className="markdown-img-wrapper"><ImageGallery .../></div>
  • web/app/components/base/markdown-blocks/plugin-img.tsx has the same pattern
  • web/app/components/base/image-gallery/index.tsx root is <div ...>

When Paragraph falls back to <p>{children}</p> (e.g. image is not the first child), the rendered tree becomes <p> ... <div> ... </div> ... </p>, which is invalid HTML and triggers hydration warnings.

Affected Call Chain (from runtime stack)

  • ReactMarkdownWrapper (web/app/components/base/markdown/react-markdown-wrapper.tsx)
  • Paragraph (web/app/components/base/markdown-blocks/paragraph.tsx)
  • Img (web/app/components/base/markdown-blocks/img.tsx)
  • ImageGallery (web/app/components/base/image-gallery/index.tsx)

Notes

This issue is isolated to report/triage only; no code changes are included in this report.

Originally created by @lyzno1 on GitHub (Feb 16, 2026). ## Summary When rendering Markdown that includes an inline image inside a paragraph, the web app logs an invalid DOM nesting warning: `In HTML, <div> cannot be a descendant of <p>. This will cause a hydration error.` This can lead to hydration mismatch/noise in Next.js. ## Environment - Dify web frontend - Next.js `16.1.5` (Turbopack) ## Reproduction 1. Open a page that renders Markdown through `ReactMarkdownWrapper`. 2. Render content where a paragraph contains an inline image, for example: - `Text before ![image](https://example.com/a.png) text after` - or raw HTML image inside text: `Text before <img src="https://example.com/a.png" alt="image" /> text after` 3. Open browser console. ## Actual Result Console warning/error appears: - `In HTML, <div> cannot be a descendant of <p>. This will cause a hydration error.` ## Expected Result Markdown renderer should output valid HTML nesting without `<div>` inside `<p>`. ## Suspected Root Cause The `img` renderer returns block-level wrappers even when used in paragraph (inline) context: - `web/app/components/base/markdown-blocks/img.tsx` returns `<div className="markdown-img-wrapper"><ImageGallery .../></div>` - `web/app/components/base/markdown-blocks/plugin-img.tsx` has the same pattern - `web/app/components/base/image-gallery/index.tsx` root is `<div ...>` When `Paragraph` falls back to `<p>{children}</p>` (e.g. image is not the first child), the rendered tree becomes `<p> ... <div> ... </div> ... </p>`, which is invalid HTML and triggers hydration warnings. ## Affected Call Chain (from runtime stack) - `ReactMarkdownWrapper` (`web/app/components/base/markdown/react-markdown-wrapper.tsx`) - `Paragraph` (`web/app/components/base/markdown-blocks/paragraph.tsx`) - `Img` (`web/app/components/base/markdown-blocks/img.tsx`) - `ImageGallery` (`web/app/components/base/image-gallery/index.tsx`) ## Notes This issue is isolated to report/triage only; no code changes are included in this report.
yindo added the 🐞 buggood first issueweb labels 2026-02-21 20:16:15 -05:00
yindo commented 2026-02-21 20:16:15 -05:00
Author
Owner
Copy Link
Copy Source

@lyzno1 commented on GitHub (Feb 16, 2026):

https://github.com/user-attachments/assets/464cc2db-b1ce-4e85-8879-ae60749165f7

@lyzno1 commented on GitHub (Feb 16, 2026): https://github.com/user-attachments/assets/464cc2db-b1ce-4e85-8879-ae60749165f7
yindo commented 2026-02-21 20:16:16 -05:00
Author
Owner
Copy Link
Copy Source

@vibeyclaw commented on GitHub (Feb 16, 2026):

Hi! I'd like to take this on. The fix should be straightforward — the Paragraph component needs to detect when its children include block-level elements (like the image wrapper <div>) and render as <div> instead of <p> in that case, or alternatively make the image renderer use <span> when in inline context. I'll put up a PR shortly.

@vibeyclaw commented on GitHub (Feb 16, 2026): Hi! I'd like to take this on. The fix should be straightforward — the `Paragraph` component needs to detect when its children include block-level elements (like the image wrapper `<div>`) and render as `<div>` instead of `<p>` in that case, or alternatively make the image renderer use `<span>` when in inline context. I'll put up a PR shortly.
yindo commented 2026-02-21 20:16:16 -05:00
Author
Owner
Copy Link
Copy Source

@Hypertension42 commented on GitHub (Feb 17, 2026):

I see you've used an AI agent to suggest a fix. However, as this is labeled as a 'good first issue', I was really hoping to take this on as my first contribution to Dify to learn the codebase and workflow manually.

Would the maintainers mind if I submit a human-authored PR for this? I believe the learning process is the core purpose of these issues. I'm ready to work on it now!

@Hypertension42 commented on GitHub (Feb 17, 2026): I see you've used an AI agent to suggest a fix. However, as this is labeled as a 'good first issue', I was really hoping to take this on as my first contribution to Dify to learn the codebase and workflow manually. Would the maintainers mind if I submit a human-authored PR for this? I believe the learning process is the core purpose of these issues. I'm ready to work on it now!
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
Knowledge Pipeline
Proposal
WIP
cloud
dependencies
feat:webapp
good first issue
outdated
performance
pull-request
Mirrored from GitHub Pull Request
 python:uv
refactor
size:L
stale
status: accepting prs
status: blocked
status: in discussion
stt & tts
vulnerablity
web
wont-fix
🌊 feat:workflow
🌚 invalid
🐞 bug
👻 feat:rag
💪 enhancement
📚 documentation
🔨 feat:tools
🙋‍♂️ question
🙏 help wanted
🤔 cant-reproduce
🤖 feat:agent
No Label good first issue web 🐞 bug
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
yindo
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: langgenius/dify#22234
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?