Ad

React Attempted To Reuse Markup In A Container But The Checksum Was Invalid

- 1 answer

A very simple React.js app gives this warning:

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

The problem is that I don't use any server rendering, what I'm aware of. Here is my package.json file:

{
  "name": "mprea",
  "version": "0.0.1",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "NODE_ENV=development webpack-dev-server",
    "build": "webpack --progress --colors",
    "deploy": "NODE_ENV=production webpack -p"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.4.5",
    "babel-loader": "^6.2.1",
    "babel-plugin-react-transform": "^2.0.0",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "css-loader": "~0.23.0",
    "exports-loader": "^0.6.2",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.8.4",
    "fs": "0.0.2",
    "html-webpack-plugin": "^2.7.1",
    "imports-loader": "^0.6.5",
    "less": "^2.5.3",
    "less-loader": "^2.2.1",
    "react-bootstrap": "^0.28.1",
    "react-router": "^1.0.3",
    "react-transform-hmr": "~1.0.1",
    "style-loader": "~0.13.0",
    "url-loader": "^0.5.6",
    "webpack": "~1.12.12",
    "webpack-dev-server": "^1.14.1",
    "webpack-merge": "^0.7.3"
  },
  "dependencies": {
    "react-dom": "~0.14.6",
    "react": "~0.14.6",
    "bootstrap": "^3.3.5",
    "history": "^1.17.0",
    "jquery": "^2.2.0",
    "bootstrap-webpack": "0.0.5"
  }
}

Here is my webpack file:

var path = require('path');
var HtmlwebpackPlugin = require('html-webpack-plugin');
var webpack = require('webpack');
var merge = require('webpack-merge');

var TARGET = process.env.npm_lifecycle_event;
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, 'app');

process.env.BABEL_ENV = TARGET;

var output_path = ROOT_PATH.concat(process.env.NODE_ENV === 'production' ? '/dist' : '/build');


var common = {
    entry: APP_PATH,

    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    output: {
        path: output_path,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            {
                test: /\.css$/,
                loaders: ['style', 'css'],
                include: APP_PATH
            },
            {
                test: /\.jsx?$/,
                loaders: ['babel'],
                include: APP_PATH
            },
            {
                test: /\.json?$/,
                loaders: ['file'],
                include: APP_PATH
            },
            { test: /\.(woff|woff2)$/,  loader: "url-loader?limit=10000&mimetype=application/font-woff" },
            { test: /\.ttf$/,    loader: "file-loader" },
            { test: /\.eot$/,    loader: "file-loader" },
            { test: /\.svg$/,    loader: "file-loader" }

        ]
    },
    plugins: [
        new HtmlwebpackPlugin({
            title: 'test.se',
            template: './app/app.html',
            output: {path: ROOT_PATH + '/build',
                filename: 'app.html'}
        }),

        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        })
    ]
};

if(TARGET === 'start' || !TARGET) {
    module.exports = merge(common, {

        devServer: {
            historyApiFallback: true,
            hot: true,
            inline: true,
            progress: true,

            host: process.env.HOST,
            port: process.env.PORT
        },
        plugins: [

            new webpack.HotModuleReplacementPlugin()
        ]
    });
}
else {
    module.exports = common;
}

The warning is displayed even if I build the production variant and with different web servers.

Here is the html-file:

<!DOCTYPE html>
<html lang="sv">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Test</title>

</head>
<body><div id="app">

</div>

<script src="bundle.js"></script>

</body>
</html>

And finally, the index.jsx file:

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(<div>Testing!</div>
    , document.getElementById('app'));

What am I doing wrong?

Thanks

Ad

Answer

Check your HTML file that is output by the HTMLwebpackPlugin, the plugin automatically includes the script tag requiring your bundle, if you have this in your source HTML template as you show above it will be in the outputted HTML file twice causing the error you are getting.

You can disable the atomactic injection of your bundle by setting "inject" to false as below:

new HtmlwebpackPlugin({
    title: 'test.se',
    template: './app/app.html',
    inject: false,
    output: {path: ROOT_PATH + '/build',
        filename: 'app.html'}
}),

You can read more at: https://github.com/ampedandwired/html-webpack-plugin#configuration

Ad
source: stackoverflow.com
Ad