0

A la hora de importar una imagen con el componente Image de nextjs me sale la siguiente advertencia:

Warning: Prop style did not match. Server: "display: block; max-width: 100%; width: initial; height: initial; background: none; opacity: 1; border: 0px; margin: 0px; padding: 0px; --darkreader-inline-bgimage:none; --darkreader-inline-bgcolor: initial; --darkreader-inline-border-top: initial; --darkreader-inline-border-right: initial; --darkreader-inline-border-bottom: initial; --darkreader-inline-border-left: initial;" Client: "display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" at img
at span
at span
at Image (webpack-internal:///./node_modules/next/dist/client/image.js:50:20)
at LoadableImpl (webpack-internal:///./node_modules/next/dist/shared/lib/loadable.js:142:5)
at a
at LinkComponent (webpack-internal:///./node_modules/next/dist/client/link.js:108:19)
at div
at header
at div
at Header
at div
at Layout (webpack-internal:///./components/Layout.js:15:23)
at div
at Home
at MyApp (webpack-internal:///./pages/_app.js:18:24)
at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:8:20742)
at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:8:23635)
at Container (webpack-internal:///./node_modules/next/dist/client/index.js:111:5)
at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:300:24)
at Root (webpack-internal:///./node_modules/next/dist/client/index.js:508:25)

Ya he intentado importando dinámicamente, agregando un archivo .babelrc y colocándole un loader al componente y nada.

"dependencies": {
  "babel-preset-next": "^1.4.0",
  "next": "12.3.0",
  "react": "18.2.0",
  "react-dom": "18.2.0"
},
"devDependencies": {
  "babel-plugin-styled-components": "^2.0.7",
  "eslint": "8.23.1",
  "eslint-config-next": "12.3.0"
}

Código:

    import Image from "next/image"
    import Link from "next/link";
    import dynamic from 'next/dynamic';
    // const Images = dynamic(() => import('next/image'));
    
    import styles from "../styles/Header.module.css";
    
    const Header = () => {
    
      return (
        <div>
          <header className={styles.header}>
            <div className={`container ${styles.menuLogo}`}>
              <Link href="/">
                <a>
                  <Image
                    src="/blog-img.svg"
                    width={190}
                    height={120}
                    alt="logo"
                  />
                </a>
              </Link>
          </header>
        </div>
      );
    };
    
   export default Header;

2 respuestas 2

0

El error se debe a la extensión dark reader que inyecta código cuando se esta renderizando y por ello sale este error. Si se desactiva se quita el error.

No afecta la aplicación, solo sale el error porque estamos en modo desarrollo.

La explicación detalla de la solución está en github.

-1

a mi también me sirvió mucho este articulo, instale la dependencia de babel y pude resolver el problema

https://www.meje.dev/blog/styled-components-hydration-error

1
  • Aunque teoricamente este enlace conteste la pregunta, es preferible que incluyas las partes esenciales del mismo en la respuesta. Los enlaces pueden caducar y desaparecer. Ademas llevar al usuario a que lea en otro lugar la respuesta, no es la mejor opción.
    – gbianchi
    Commented el 21 may. a las 16:59

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.