How do I remove warning "Warning: Prop style did not match" when I import Image component in nextjs?

[JuanSystems]

Friends when importing an image with the Image component of nextjs I get the following warning:

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)

I have already tried importing dynamically, adding a .babelrc file and placing a loader on the component and nothing.

I would appreciate your help. Thank you very much.

"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"
}

code:

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;

[l1qu1d]

@JuanSystems I ran into the same weird warning as well and I suspect my solution will work for you as it has for me.

Question: Are you using the extension dark reader?

If you notice in your warning you have dark reader: --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;"

Solution: Try toggling OFF the dark reader extension and see if it fixes your problem.

Why is this happening? Dark reader injects code into the source (in browser) and because you're in a development environment it's causing this error because it's checking for differences between pre-render and rendered hydration.

Note: This warning won't show up in production and can safely be ignored while using the dark reader extension.

To quote the hydration error help page:

While rendering your application, there was a difference between the React tree that was pre-rendered (SSR/SSG) and the React tree that rendered during the first render in the Browser. The first render is called Hydration which is a feature of React.
This can cause the React tree to be out of sync with the DOM and result in unexpected content/attributes being present.

[JuanSystems]

Thank you very much man.

I tried everything and thinking that the error was because I was using the latest version of nodejs.

deactivate the extension and the error is removed.

Thank you very much for the help!!!

[l1qu1d]

No problem! Can definitely throw you off lol. Can you mark it as answered as well, please?

[JuanSystems]

What a mistake, if it's already there.

[kopyl]

I don't have any kind of reader. How can I fix it?

app-index.js:35 Warning: Prop `style` did not match. Server: "position: relative;" Client: "position:relative"
    at body
    at html
    at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:73:9)
    at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:81:11)
    at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:76:9)
    at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:84:11)
    at DevRootNotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/dev-root-not-found-boundary.js:33:11)
    at ReactDevOverlay (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:84:9)
    at HotReload (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:307:11)
    at Router (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:181:11)
    at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:114:9)
    at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:161:11)
    at AppRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:536:13)
    at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:129:11)
    at RSCComponent
    at Root (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:145:11)