CODEWITHSUNDEEP
reactjsnext.js
nick
nick

Reputation: 141

React Warning: Prop x did not match. Server: x Client: x

I'm getting the following error in React when using the Next.js framework. I'm currently using the react-avatar-editor package which is where I think the following error is happening:

Warning: Prop `width` did not match. Server: "250" Client: "500"
in canvas (created by i)
in i (at upload.js:22)
in div (at upload.js:21)
in ImageCrop (at test.js:5)
in Test (at _app.js:65)
in App
in ErrorBoundary (created by ReactDevOverlay)
in ReactDevOverlay (created by Container)
in Container (created by AppContainer)
in AppContainer
in Root

This is component with it's props, this is within a file named avatar-editor.js:

<AvatarEditor
    ref={setEditorRef}
    image="image.jpg"
    width={250}
    height={250}
    border={0}
    color={[255, 255, 255, 0.6]} 
    scale={scale}
/>

Upvotes: 1

Views: 1367

Answers (1)

nick
nick

Reputation: 141

In case anyone else come across a similar issue, it turned out to be something to do with the Next.js server side rendering (SSR). I managed to resolve it by using the Next.js dynamic import:

const ImageCrop = dynamic(() => import('../components/avatar-editor'), {
  ssr: false
})

You can read more about dynamic import in Next.js here: https://nextjs.org/docs/advanced-features/dynamic-import

Upvotes: 2

Related Questions