title: ReactDOM.hydrate() not working after initial SSR (React JS)
body: <p>After my initial server-side render of the application, my onClick event (on a button in my Homepage.js component) is not executing. It seems my ReactDom.hydrate() in my client.js file is not working. Any help would be greatly appreciated! You can go to the following repo for whole code base <a href="https://github.com/thegreekjester/React_SSR" rel="nofollow noreferrer">https://github.com/thegreekjester/React_SSR</a>.</p>
  
  <p>Steps to run and reproduce the issue:</p>
  
  <ul>
  <li>npm install</li>
  <li>npm run dev</li>
  <li>open <code>localhost:3000</code> in browser </li>
  <li>Click on the button that appears</li>
  <li>You should see some message in the console but you don't</li>
  </ul>
  
  <p>homepage.js:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react'
  import {connect} from 'react-redux'
  
  class HomePage extends React.Component{
  
      exampleMethod(){
        console.log('Shit is going down')
      }
  
      render(){
        return(
          &lt;div&gt;
            &lt;h1&gt;{this.props.state.attributes.name}&lt;/h1&gt;
            &lt;button onClick={() =&gt; this.exampleMethod()}&gt; Console log some text &lt;/button&gt;
          &lt;/div&gt;
        )
      }
  }
  
  const mapStateToProps = (state) =&gt; ({state:state.optimizelyReducer});
  
  const mapDispatchToProps = (dispatch) =&gt; ({
    dataFileManager: (timing, id, attributes) =&gt; dispatch({type:'USER_SERVICE', id:id, attributes:attributes},
                                 dispatch({type:'DATAFILE_MANAGER', timing:timing})),
    updateAttr: (attr) =&gt; dispatch({type:'UPDATE_ATTR', attr:attr, value:value})
  });
  
  HomePage = connect(mapStateToProps, mapDispatchToProps)(HomePage);
  
  
  
  export default HomePage;</code></pre>
  </div>
  </div>
  </p>
  
  <p>client.js:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import {BrowserRouter} from 'react-router-dom';
  import { Provider as ReduxProvider } from 'react-redux'
  import App from './App.js'
  import configureStore from './store/configureStore';
  
  const preloadedState = window.__PRELOADED_STATE__
  
  const store = configureStore(window.__PRELOADED_STATE__);
  
  ReactDOM.hydrate(
    &lt;ReduxProvider store={store}&gt;
    &lt;BrowserRouter&gt;
      &lt;App /&gt;
    &lt;/BrowserRouter&gt;
    &lt;/ReduxProvider&gt;,
    document.getElementById('root')
  );</code></pre>
  </div>
  </div>
  </p>
  
  <p>server.js:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import 'babel-polyfill'
  import express from 'express';
  import React from 'react';
  import ReactDOMServer from 'react-dom/server';
  import { StaticRouter } from 'react-router'
  import bodyparser from 'body-parser'
  import App from './src/App.js'
  import { createStore } from 'redux'
  import { Provider } from 'react-redux'
  import configureStore from './src/store/configureStore.js'
  
  
  const app = express();
  const PORT = process.env.PORT || 3000
  
  
  app.use(bodyparser.json());
  
  app.use(express.static('build/public'));
  
  function handleRender(req, res){
    const store = configureStore()
    const context = {}
    const html = ReactDOMServer.renderToString(
      &lt;Provider store={store}&gt;
      &lt;StaticRouter location={req.url} context={context}&gt;
        &lt;App/&gt;
      &lt;/StaticRouter&gt;
      &lt;/Provider&gt;
    )
  
    const preloadedState = store.getState()
    res.send(renderFullPage(html, preloadedState))
  }
  
  function renderFullPage(html, preloadedState){
    return  `
            &lt;html&gt;
            &lt;head&gt;
            &lt;/head&gt;
            &lt;body&gt;
              &lt;div id='root'&gt;${html}&lt;/div&gt;
              &lt;script&gt;window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState)}&lt;/script&gt;
              &lt;script type='babel' src='client_bundle.js'&gt;&lt;/script&gt;
            &lt;/body&gt;
            &lt;/html&gt;`
  
  }
  
  app.use(handleRender)
  
  
  
  app.listen(PORT, () =&gt; {
    console.log(`React SSR App is running on port ${PORT}`)
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>Webpack.client.js</p>
  
  <pre><code>const path = require('path');
  const webpackNodeExternals = require('webpack-node-externals');
  
  module.exports = {
  
    // production || development
    mode: 'development',
  
    // Inform webpack that we're building a bundle
    // for nodeJS, rather then for the browser
    target: 'node',
  
    // Tell webpack the root file of our
    // server application
    entry: './src/client.js',
  
    // Tell webpack where to put the output file
    // that is generated
    output: {
      filename: 'client_bundle.js',
      path: path.resolve(__dirname, 'build/public'),
      publicPath: '/build/public'
    },
    module: {
      rules: [
        {
          test: /\.js?$/,
          loader: 'babel-loader',
          exclude: '/node_modules/',
          options: {
            presets: [
              'react', 'stage-0', ['env', {
                target: 'web'
              }]
            ]
          }
        }
      ]
    }
  };
  </code></pre>
  
  <p>Webpack.server.js</p>
  
  <pre><code>const path = require('path');
  const webpackNodeExternals = require('webpack-node-externals');
  
  module.exports = {
  
    // production || development
    mode: 'development',
  
    // Inform webpack that we're building a bundle
    // for nodeJS, rather then for the browser
    target: 'node',
  
    // Tell webpack the root file of our
    // server application
    entry: './server.js',
  
    // Tell webpack where to put the output file
    // that is generated
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'build'),
      publicPath: '/build'
    },
  
    module: {
      rules: [
        {
          test: /\.js?$/,
          loader: 'babel-loader',
          exclude: '/node_modules/',
          options: {
            presets: [
              'react', 'stage-0', ['env', {
                target: { browsers: ['last 2 versions']}
              }]
            ]
          }
        }
      ]
    },
  
    // Tell webpack not to bundle any libraries that exist in the 'node_modules' folder
    // into the server bundle
    externals: [webpackNodeExternals()]
  
  };
  </code></pre>