4

How to use MagicZoom Plus in a server-side app like next js?

I see the following error when I refresh the page:

"Warning: Expected server HTML to contain a matching in ."

enter image description here

const [activeIndex, setActiveIndex] = useState(0);

  <div>
   <a href={item.src[activeIndex]} className="MagicZoom">
    <img src={item.src[activeIndex]} alt="" />
   </a>
  </div>
Pep
  • 647
  • 6
  • 20
  • Looks like a hydration issue, where server HTML doesn't match client one. Could you provide the code that is triggering the warning? – juliomalves Jan 11 '21 at 16:12
  • Please see the updated comment above @juliomalves, how can I remove that hydration issue? – Pep Jan 11 '21 at 18:53
  • 1
    Is that the full code for that component? If not, could you post the rest? – juliomalves Jan 11 '21 at 19:00
  • Sure, it's in this repo, https://github.com/AndresHMosqueda/productnextJs @juliomalves – Pep Jan 11 '21 at 22:00

0 Answers0