ReactJs. What happened to you?

Question

React

For some time I did not write on React and now I decided to correct this act. But all of a sudden I started getting this error.

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. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
 (client) <div data-reactid="
 (server) <div data-reactid="

What's wrong?

import React from 'react'
import { render } from 'react-dom'
import { Router, Route, browserHistory } from 'react-router'
import App from './app/containers/App'

render((
  <Router history={browserHistory}>
    <Route path="/" component={App}>
    </Route>
  </Router>
), document.getElementById('app'))

app.js

import React from 'react'

import './App.css'

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>h</h1>
      </div>
    )
  }
}

export default App

Answer 1

The problem was in webpack-html-plugin

Answer 2

React has nothing to do with it. It's just that your markup from the server and rendered on the client is different.

Answer 3

This means that, firstly, there is server rendering in the application, and secondly, now it turns out that the server markup differs from the one that turned out during the first (!) render.
A little lower in the error is shown the place where the identity check falls, this can help to understand what exactly is different in rendering.
Often this happens when something is rendered asynchronously from the first render.