title: Reac-Router v4, server side rendering, ReferenceError: document is not defined
body: <p>I'm using react-router version 4 and trying to handle routes on the server. </p>
  
  <p>All tutorials including <a href="https://github.com/ReactTraining/react-router/blob/master/docs/guides/ServerRendering.md" rel="nofollow noreferrer">offical Server Rendering guide on ReactTraining repo</a> and <a href="https://github.com/reactjs/react-router-tutorial/tree/master/lessons/13-server-rendering" rel="nofollow noreferrer">React Router tutorial - server side rendering</a> are using React Router v3.</p>
  
  <p>The only available guide out there is <a href="https://react-router.now.sh/ServerRouter" rel="nofollow noreferrer">Server side rendering with React Router version 4</a>.</p>
  
  <p>I have followed same steps, but i got the following error : </p>
  
  <pre><code> _reactDom2.default.render(_react2.default.createElement(App, null), document.getElementById('app'));
                                                                              ^
  
  ReferenceError: document is not defined
      at Object.&lt;anonymous&gt; (/Users/fakhruddinabdi/Projects/fotomantic/fotomantic.com/public/server.bundle.js:271:70)
      at __webpack_require__ (/Users/fakhruddinabdi/Projects/fotomantic/fotomantic.com/public/server.bundle.js:20:30)
      at Object.&lt;anonymous&gt; (/Users/fakhruddinabdi/Projects/fotomantic/fotomantic.com/public/server.bundle.js:59:13)
      at __webpack_require__ (/Users/fakhruddinabdi/Projects/fotomantic/fotomantic.com/public/server.bundle.js:20:30)
      at /Users/fakhruddinabdi/Projects/fotomantic/fotomantic.com/public/server.bundle.js:40:18
      at Object.&lt;anonymous&gt; (/Users/fakhruddinabdi/Projects/fotomantic/fotomantic.com/public/server.bundle.js:43:10)
      at Module._compile (module.js:556:32)
      at Object.Module._extensions..js (module.js:565:10)
      at Module.load (module.js:473:32)
      at tryModuleLoad (module.js:432:12)
  </code></pre>
  
  <p>Here is my web</p>
  
  <pre><code>var fs = require('fs');
  var path = require('path');
  var ExtractTextPlugin = require('extract-text-webpack-plugin');
  
  module.exports = {
  
    entry: path.resolve(__dirname, 'server.js'),
  
    output: {
      filename: 'public/server.bundle.js',
    },
  
    plugins: [
      new ExtractTextPlugin('public/styles.css'),
    ],
  
    target: 'node',
  
    // keep node_module paths out of the bundle
    externals: fs.readdirSync(path.resolve(__dirname, 'node_modules')).concat([
      'react-dom/server', 'react/addons',
    ]).reduce(function (ext, mod) {
      ext[mod] = 'commonjs ' + mod
      return ext
    }, {}),
  
    node: {
      __filename: true,
      __dirname: true
    },
  
    module: {
      loaders: [
        {
          test: /\.js$/,
          loader: 'babel-loader',
          exclude: /node_modules/,
        }, {
          test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
          loader: 'url-loader?limit=10000&amp;name=/[hash].[ext]',
        }, {
          test: /\.scss$/,
          exclude: /node_modules/,
          loader: ExtractTextPlugin.extract(['css', 'sass']),
        },
      ],
    },
  
  }
  </code></pre>
  
  <p>And my server.js : </p>
  
  <pre><code>import { createServer } from 'http';
  import React from 'react';
  import { renderToString } from 'react-dom/server';
  import { ServerRouter, createServerRenderContext } from 'react-router';
  import App from './src/components/App';
  
  createServer((req, res) =&gt; {
  
    // first create a context for &lt;ServerRouter&gt;, it's where we keep the
    // results of rendering for the second pass if necessary
    const context = createServerRenderContext()
  
    // render the first time
    let markup = renderToString(
      &lt;ServerRouter
        location={req.url}
        context={context}
      &gt;
        &lt;App/&gt;
      &lt;/ServerRouter&gt;
    )
  
    // get the result
    const result = context.getResult()
  
    // the result will tell you if it redirected, if so, we ignore
    // the markup and send a proper redirect.
    if (result.redirect) {
      res.writeHead(301, {
        Location: result.redirect.pathname
      })
      res.end()
    } else {
  
      // the result will tell you if there were any misses, if so
      // we can send a 404 and then do a second render pass with
      // the context to clue the &lt;Miss&gt; components into rendering
      // this time (on the client they know from componentDidMount)
      if (result.missed) {
        res.writeHead(404)
        markup = renderToString(
          &lt;ServerRouter
            location={req.url}
            context={context}
          &gt;
            &lt;App /&gt;
          &lt;/ServerRouter&gt;
        )
      }
      res.write(markup)
      res.end()
    }
  }).listen(8080)
  </code></pre>