next.js report React Hydration Error

[zjy365]

What did you do?

In a clean next project, the react content-loader is used directly in the index file to report the React Hydration Error Warning: Prop id did not match. Server: "2xdmr67-aria" Client: "bjsahf-aria"

import ContentLoader, { Facebook } from 'react-content-loader'
const MyLoader = () => (
  <ContentLoader viewBox="0 0 380 70">
    {/* Only SVG shapes */}
    <rect x="0" y="0" rx="5" ry="5" width="70" height="70" />
    <rect x="80" y="17" rx="4" ry="4" width="300" height="13" />
    <rect x="80" y="40" rx="3" ry="3" width="250" height="10" />
  </ContentLoader>
)

export default function App() {
  return (
    <div>
      <MyLoader />
    </div>
  )
}

What did you expect to happen?

Expect to eliminate this warning

Which versions of react-content-loader, and which browser are affected by this issue?

"next": "13.0.7",
"react": "18.2.0",
"react-content-loader": "^6.2.0",
"react-dom": "18.2.0",

[danilowoz]

Hey! ReactContentLoader creates a random id in order to keep each loading unique, so that's expected and you can avoid this error using uniqueKey prop:

const id = React.useId()

return <ReactContentLoader uniqueKey={id}> ... </ReactContentLoader>

Hope it works

[zjy365]

thanks