Warning: Expected server HTML to contain a matching <img> in <span>

[kyds3k]

I'm getting this error when using Interweave to serve up an image:

<Interweave content={edition.homescreen.image} allowAttributes={true} />

console error:

Warning: Expected server HTML to contain a matching <img> in <span>. at img at Element (webpack-internal:///./node_modules/interweave/esm/index.js:45:30) at span at Element (webpack-internal:///./node_modules/interweave/esm/index.js:45:30) at Markup (webpack-internal:///./node_modules/interweave/esm/index.js:962:26) at Interweave (webpack-internal:///./node_modules/interweave/esm/index.js:998:26) at div at div at div at div at Homescreen (webpack-internal:///./pages/edition/[edition_id]/index.js:55:22) at Provider (webpack-internal:///./node_modules/next-auth/dist/client/index.js:584:24) at MyApp (webpack-internal:///./pages/_app.js:33:24) at ErrorBoundary (webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ErrorBoundary.js:26:47) at ReactDevOverlay (webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ReactDevOverlay.js:86:23) at Container (webpack-internal:///./node_modules/next/dist/client/index.js:160:5) at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:648:24) at Root (webpack-internal:///./node_modules/next/dist/client/index.js:784:25)

The image is still served, just would like to get rid of that error!

[milesj]

@kyds3k What's the actual HTML in content being parsed?

[dulquerirfan]

I too have same error my entire html code is wrapped in span tag how do I fix it ??

[milesj]

@dulquerirfan I need actual examples to debug.

[cyrilchapon]

Next.js is using SSR by default, and thus requires the interweave tweak to work with. Just follow https://interweave.dev/docs/ssr , for my case I added the polyfill at the very top of _Document.ts

// Polyfill document for interweave
import { polyfill } from 'interweave-ssr'
polyfill()

// ... rest imports