title: Browser history needs a DOM when server side rendering
body: <p>I am trying to implement server-side-rendering in my react app (using the create-react-app environment).  I am trying to follow the example shown here, which still maintaining my app's structure.  Not much different, so I figured it wouldn't be an issue to follow along within my own app.
  <a href="https://medium.com/@benlu/ssr-with-create-react-app-v2-1b8b520681d9" rel="nofollow noreferrer">https://medium.com/@benlu/ssr-with-create-react-app-v2-1b8b520681d9</a></p>
  
  <p>When I attempt to build the app, I just the following: <code>Invariant Violation: Browser history needs a DOM</code></p>
  
  <p>I've looked everywhere I can and can't seem to find what I am doing wrong.</p>
  
  <p><strong>client side index.js:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <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 } from 'react-redux'
  import Store from './store'
  
  import App from './App';
  import registerServiceWorker from './registerServiceWorker';
  
  ReactDOM.render(
   &lt;Provider store={Store}&gt;
    &lt;BrowserRouter&gt;
     &lt;App /&gt;
    &lt;/BrowserRouter&gt;
   &lt;/Provider&gt;,
   document.getElementById('root')
  );
  registerServiceWorker();</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>server side app.js</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>require('ignore-styles')
  const bodyParser = require('body-parser')
  const compression = require('compression')
  const express = require('express')
  const morgan = require('morgan')
  const path = require('path')
  const fs = require('fs')
  
  require('babel-register')({
   ignore: /\/(build|node_modules)\//,
   presets: ['env', 'react-app']
  })
  
  // routes
  const index = require('./routes/index')
  // const api = require('./routes/api')
  const universalLoader = require('./universal')
  
  const app = express()
  
  // Support Gzip
  app.use(compression())
  
  // Support post requests with body data (doesn't support multipart, use multer)
  app.use(bodyParser.json())
  app.use(bodyParser.urlencoded({ extended: false }))
  
  // Setup logger
  app.use(morgan('combined'))
  
  app.use('/', index)
  
  // Serve static assets
  app.use(express.static(path.resolve(__dirname, '..', 'build')))
  
  // app.use('/api', api)
  
  // Always return the main index.html, so react-router render the route in the client
  app.use('/', universalLoader)
  
  module.exports = app</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>server side universal.js</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const path = require('path')
  const fs = require('fs')
  
  const React = require('react')
  const {Provider} = require('react-redux')
  const {renderToString} = require('react-dom/server')
  const {StaticRouter} = require('react-router-dom')
  
  const {default: configureStore} = require('../src/store')
  const {default: App} = require('../src/App')
  
  module.exports = function universalLoader(req, res) {
   const filePath = path.resolve(__dirname, '..', 'build', 'index.html')
  
   fs.readFile(filePath, 'utf8', (err, htmlData)=&gt;{
    if (err) {
     console.error('read err', err)
     return res.status(404).end()
    }
    const context = {}
    const store = configureStore()
    const markup = renderToString(
     &lt;Provider store={store}&gt;
      &lt;StaticRouter
       location={req.url}
       context={context}
      &gt;
       &lt;App/&gt;
      &lt;/StaticRouter&gt;
     &lt;/Provider&gt;
    )
  
    if (context.url) {
     // Somewhere a `&lt;Redirect&gt;` was rendered
     redirect(301, context.url)
    } else {
     // we're good, send the response
     const RenderedApp = htmlData.replace('{{SSR}}', markup)
     res.send(RenderedApp)
    }
   })
  }</code></pre>
  </div>
  </div>
  </p>