[Bug] Production build for @n8n/chat is showing blank messaged
Describe the problem/error/question
Bug Description
When i am using n8n chat bot in this case its showing me empty messages from bot and user both side. Its not showing any messages coming in HTML docs.
I am using React, Next js with embeded chat menu
To Reproduce
Create 1 chat bot with n8n with embeded chat mode
add that in UI ( currently i am using Next.js )
after adding it on UI we can see messages are coming in from user and bot
Hi @AvanParvadiya Welcome!
I have personally faced that although at first i though it was a CSS issue but when i have tested it with different CSS styling it had the same issue, although this does not happen every time but it fixed when i have rolled back to a stable version. This would be a good BUG report.
@Anshul_Namdev already checked with by changing version of library it’s not working properly even message coming from chat bot or message we are sending is not visible on ui as its not present on inspection of elements itself
the “not present on inspection of elements itself” is the key clue — this is a Next.js SSR hydration issue, not a bug in the @n8n/chat library itself.
@n8n/chat is a purely client-side library (it uses browser APIs on init), and when Next.js tries to server-side render it, the DOM never gets populated — that’s why the message elements are completely absent in the inspector.
fix: wrap your chat component in a dynamic import with ssr: false
js
import dynamic from 'next/dynamic'
const N8nChat = dynamic(() => import('./your-chat-component'), { ssr: false })
```
this tells Next.js to skip server rendering for that component entirely and only mount it in the browser. should fix the blank messages in production.
