Html content are wrapping with span element as parent element

[Ajitpatil92002]

Html content are wrapping with span element as parent element

Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: Expected server HTML to contain a matching

in .

See more info here: https://nextjs.org/docs/messages/react-hydration-error

Component Stack
p
Element
./node_modules/interweave/esm/bundle-7aab7250.js (315:3)
span
Element
./node_modules/interweave/esm/bundle-7aab7250.js (315:3)
Markup
./node_modules/interweave/esm/index.js (652:5)
Interweave
./node_modules/interweave/esm/index.js (695:5)
div
div
Card
./src/components/Card.jsx (19:11)
div
section
Call Stack
throwOnHydrationMismatch
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (6779:0)
tryToClaimNextHydratableInstance
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (6818:0)
updateHostComponent$1
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (15516:0)
beginWork$1
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (17351:0)
HTMLUnknownElement.callCallback
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (19437:0)
Object.invokeGuardedCallbackImpl
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (19486:0)
invokeGuardedCallback
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (19561:0)
beginWork
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (25672:0)
performUnitOfWork
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (24501:0)
workLoopConcurrent
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (24487:0)
renderRootConcurrent
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (24443:0)
performConcurrentWorkOnRoot
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (23321:0)
workLoop
node_modules\next\dist\compiled\scheduler\cjs\scheduler.development.js (261:0)
flushWork
node_modules\next\dist\compiled\scheduler\cjs\scheduler.development.js (230:0)
MessagePort.performWorkUntilDeadline
node_modules\next\dist\compiled\scheduler\cjs\scheduler.development.js (537:0)

[sarbazx]

Hi @Ajitpatil92002 did able to fix this? I'm also getting this error.

[milesj]

Interweave always wraps with an element. Just change the wrapping tag: <Interweave tagName="div" />

[sarbazx]

what about SSR?

[milesj]

It should be the same. React rendering on the server or client is still just rendering.