Next.js, why? Warning: Prop `style` did not match. Server: "object-fit: cover;" Client: "object-fit:cover"

Viewed 166

I got this error, strange:

next-dev.js?3515:25 Warning: Prop `style` did not match. Server: "object-fit: cover;" Client: "object-fit:cover"
^^

and to componenet, what is wrong?

import Image from 'next/image'
import React, { useState } from 'react'
import styles from '../styles/ImageUpload.module.css'
import {
    updateClientAndServer,
    uploadImage,
    useValueFromKeyPath,
} from 'tikexModule/slice'
import { useAppDispatch } from 'tikexModule/hooks/useAppDispatch'
import { v4 as uuid } from 'uuid'

interface ImageUploadProps {
    bucket: string
    keyPath: string[]
    title?: string
    srcFallback?: string
    width?: number
    height?: number
}
const ImageUpload2 = ({
    bucket,
    keyPath,
    title,
    srcFallback,
    width,
    height,
}: ImageUploadProps) => {
    const dispatch = useAppDispatch()
    const keyPath2 = keyPath
    const imgId = useValueFromKeyPath(keyPath)

    return (
        <>
            <input
                type="file"
                id="actual-btn"
                onChange={(e) => {
                    const imgIdNew = uuid()
                    dispatch(
                        uploadImage({
                            props: {
                                imageKey: imgIdNew,
                                bucket: bucket,
                                imageKeyPrev: imgId,
                            },
                            file: e.target.files[0],
                            andThen: () => {
                                dispatch(
                                    updateClientAndServer({
                                        keyPath: keyPath,
                                        value: imgIdNew,
                                        operation: 'setValue',
                                        valuePrev: imgId,
                                    })
                                )
                            },
                        })
                    )
                }}
                hidden
            />
            <label
                className={title ? 'btn btn-sm btn-circle' : 'img-box'}
                htmlFor="actual-btn"
                style={{ cursor: 'pointer' }}
            >
                {title ?? (
                    <img
                        src={
                            imgId
                                ? `https://${bucket}.s3.eu-central-1.amazonaws.com/${imgId}`
                                : srcFallback ?? 'https://themekit.dev/shared/thumbs/wide.png'
                        }
                        alt="cover image"
                        style={{ objectFit: 'cover' }}
                        width={width}
                        height={height}
                    />
                )}
            </label>
        </>
    )
}

export default ImageUpload2
2 Answers

run :

npm add --dev babel-plugin-styled-components

then create a .babelrc in your src folder and add :

{
    "presets": ["next/babel"],
    "plugins": [["styled-components", { "ssr": true }]]
}
Related