reactjs - 反应警告：道具 x 不匹配。服务器：x 客户端：x

Question

使用 Next.js 框架时，我在 React 中收到以下错误。我目前正在使用react-avatar-editor我认为发生以下错误的包：

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

这是带有它的道具的组件，它在一个名为的文件中avatar-editor.js：

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

标签： reactjsnext.js

Answer 1

万一其他人遇到类似问题，结果证明这与 Next.js 服务器端渲染（SSR）有关。我设法通过使用 Next.js 动态导入来解决它：

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

您可以在此处阅读有关 Next.js 中动态导入的更多信息：https ://nextjs.org/docs/advanced-features/dynamic-import