SSR App: Seeing React Warning "Extra attributes from the server: data-from-server"

[rhernand3z]

Hi,

First of all want to thank you for this great component 🥇. The issue I am seeing is when using this component in a isomorphic application, I am seeing this warning in console.

Warning: Extra attributes from the server: data-from-server

Inspecting the DOM for the component reveals data-from-server=yes. Looks like the warning comes from the React hydrate method when there as mismatch in the Server vs Client DOM tree?

NOTE: I am not initializing initSimpleImg(...), simply using the documented props:

<SimpleImg
  animationDuration={1}
  src="https://.../images/hero/hp_main_banner_960.png"
  srcSet="https://.../images/hero/hp_main_banner_480.png 480w, ...."
  sizes="(min-width: 480px) 480px, ...."
  alt="An illustration"
/>

Is there unique steps to follow when using in isomorphic web applications?

[rhernand3z]

Thanks for the quick turnaround, will be on the lookout once the PR is merged.

[bluebill1049]

thanks @rhernand3z for reporting the issue ❤️ and @revskill10 for the fix 🙏.

i am re-open this issue, until you have tested and working.

react-simple-img@2.1.6

[revskill10]

@bluebill1049 This is, to me a temporary fix. True fix will be like this: The component will have isServer attribute default to false. So on running, the isServer is get from a global context. On server, it will be true, on client when hydrating, it'll set to be false. Or, on building, we could set that isServer at build time. Because webpack could build two targets: node and web. With each target, user just inject a variable to isServer and each bundle will be set to correct mode. How do you think ?

[bluebill1049]

hey @revskill10,

thanks for you suggestion and contribution. i think as long as your fix will resolve the server/client mis-match, then we are good. keep it simple and beautiful 👍

cheers bill

[bluebill1049]

@rhernand3z is the issue got resolved?

[rhernand3z]

@bluebill1049 it is good to go! thanks @revskill10 ⚔️