React 尝试在容器中重用标记，但校验和无效

Question

一个非常简单的 React.js 应用程序给出了这个警告：

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

问题是我不使用任何服务器渲染，据我所知。这是我的 package.json 文件：

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

这是我的 webpack 文件：

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

即使我构建生产变体并使用不同的 Web 服务器，也会显示警告。

这是 html 文件：

<!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>

最后是 index.jsx 文件：

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

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

我做错了什么？

谢谢

Answer 1

检查 HTMLwebpackPlugin 输出的 HTML 文件，插件会自动包含需要你的 bundle 的脚本标签，如果你在源 HTML 模板中有这个，如上面所示，它将在输出的 HTML 文件中两次导致错误你得到了。

您可以通过将“inject”设置为 false 来禁用包的原子注入，如下所示：

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

您可以阅读更多内容：https://github.com/ampedandwired/html-webpack-plugin#configuration