Text content did not match. Warning in React 16

For those discovering this error because your client and server purposefully render different content (like the server rendering a dark theme which gets replaced with the user preference on load), use suppressHydrationWarning to suppress the error.

For example:

<div suppressHydrationWarning>Ignore this</div>

The problem here is that your server-side application does not reflect code changes. To do that you have to configure your express app as a webpack entry.

Briefly, you need 2 webpack configurations one for server and another for client code.The server one will look something like this

module.exports = {  entry: {    server: './server.js',  },  output: {    path: path.join(__dirname, 'dist'),    publicPath: '/',    filename: '[name].js'  },  target: 'node',  node: {    // Need this when working with express, otherwise the build fails    __dirname: false,   // if you don't put this is, __dirname    __filename: false,  // and __filename return blank or /  },  externals: [nodeExternals()], // Need this to avoid error when working with Express  module: {    rules: [      {        // Transpiles ES6-8 into ES5        test: /\.js$/,        exclude: /node_modules/,        use: {          loader: "babel-loader"        }      },      {        // Loads the javacript into html template provided.        // Entry point is set below in HtmlWebPackPlugin in Plugins         test: /\.html$/,        use: [{loader: "html-loader"}]      }    ]  },  plugins: [    new HtmlWebPackPlugin({      template: "./index.html",      filename: "./index.html",      excludeChunks: [ 'server' ]    })  ]}

Here is a nice article explaining how to do that in details