a simple react.js app gives warning:
warning: react attempted reuse markup in container checksum invalid. means using server rendering , markup generated on server not client expecting. react injected new markup compensate works have lost many of benefits of server rendering. instead, figure out why markup being generated different on client or server: (client) <div data-reactid=" (server) <div data-reactid=" the problem don't use server rendering, i'm aware of. here 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 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 displayed if build production variant , different web servers.
here 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, index.jsx file:
import react 'react'; import reactdom 'react-dom'; reactdom.render(<div>testing!</div> , document.getelementbyid('app')); what doing wrong?
thanks
check html file output htmlwebpackplugin, plugin automatically includes script tag requiring bundle, if have in source html template show above in outputted html file twice causing error getting.
you can disable atomactic injection of bundle setting "inject" false 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
Comments
Post a Comment