'Want to add data-* attribute in a div which will be used by third party JS lib React Next Js

const speed :string =`{"speed": 0.2}`

<div className="section jarallax h-100vh"  data-jarallax={speed} 
    style={{backgroundImage: "url('/images/header-bg.jpg')"}} 
    id="home">
</div>

<Script src="./js/parallax.js"  strategy="beforeInteractive" />

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

Solution 1:^[1]

The error is thrown because there is a mismatch between the conponents that are affected by server-side rendering and the rest of your UI. what you could try is to remove the beforeactive attribute in the script tag.

If that doesn't help, please visit this link: https://nextjs.org/docs/messages/react-hydration-error

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Jan Arend

'Want to add data-* attribute in a div which will be used by third party JS lib React Next Js

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]