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文件，该插件会自动包含需要您的软件包的脚本标签，如果您在源HTML模板中有这个，如上所示，它将在输出的HTML文件中两次导致错误你到了。

您可以通过设置＆＃34;注入＆＃34;来禁用针对您的捆绑的atomactic注入。假如下：

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

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

1 个答案: