server rendering and images

[darul75]

Hi,

First just insane job you have done, bravo !

Could you give some explanations when using jsx rendering on server side with images and the following known message. I know the purpose of it but can not find any solutions to fix it:

Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. ...:
 (client) .86c8uxdds0.0"><img src="V2d-uc_.png" he
 (server) .86c8uxdds0.0"><img height="60" data-rea

This question might be out of react-starter context but how to deal with it when rendering is made on server side with component containing a reference to image not in css but with img html tag ?

My component code is something like:

if (process.env.BROWSER) {
  reactLogo = require('../images/react-logo.png');
}

export default class Header extends React.Component {  

  render() {
    return (
        <div>        
        <img src={reactLogo} height="60" />
                <header>

Webpack bundle contains image hashed name but when rendered on server side with expressjs in my case I do not see how to handle this case.

Thx,

Julien

[sokra]

Doesn't it work that way?

reactLogo = require('../images/react-logo.png');

export default class Header extends React.Component {  

  render() {
    return (
        <div>        
        <img src={reactLogo} height="60" />
                <header>

[darul75]

Well I guess I use it the wrong way.

Rendering is made by an express server side instance which render a react component and enhances an html template.

This html template links a bundle.js packed by webpack, in this bundle image src is fine because generated by webpack process.

But on server side src is missing.

[darul75]

Test is made this way

if (process.env.BROWSER) {
  reactLogo = require('./images/react-logo.png');    
  // css require then, but are fine as React do not care about it.
}

but for express server I do not figure out how to match rendering image in component

[sokra]

307594c

[darul75]

Thanks for adding an example, I was not bundling my server side with webpack which caused problem. It looks solve on my side too. What a crazy solution then webpack. Very impressive

[darul75]

You need to apply your webpack to both client and server code files at the same time. It will use same hashes, otherwise will be different and react won't be happy