title: React SSR: Document is not defined
body: <p>I have been working on this for two days now. Looked through multiple stack posts and still not found a suitable answer.</p>
  
  <p>I am trying to rendering my react project in server like following:</p>
  
  <p><strong>Server.js</strong></p>
  
  <pre><code>function handleRender(req,res){
  
    const sheetsRegistry = new SheetsRegistry();
  
    const sheetsManager = new Map();
  
    const theme = createMuiTheme({
      palette:{
        primary:green,
        accent: red,
        type: 'light',
      }
    })
  
    const generateClassName = createGenerateClassName();
  
    const html = ReactDOMServer.renderToString(
      &lt;JssProvider registry={sheetsRegistry} generateClassName={generateClassName}&gt;
        &lt;MuiThemeProvider theme={theme} sheetsManager={sheetsManager}&gt;
          &lt;TwoFA /&gt;
        &lt;/MuiThemeProvider&gt;
      &lt;/JssProvider&gt;
    )
  
    const css = sheetsRegistry.toString()
  
    res.send(renderFullPage(html,css))
  }
  
  function renderFullPage(html,css){
    return   `
      &lt;!DOCTYPE html&gt;
      &lt;html&gt;
        &lt;head&gt;
          &lt;title&gt;2FA SDK&lt;/title&gt;
        &lt;/head&gt;
        &lt;body style="margin:0"&gt;
          &lt;div id="app"&gt;${html}&lt;/div&gt;
          &lt;script id="jss-server-side"&gt;${css}&lt;/script&gt;
        &lt;/body&gt;
      &lt;/html&gt;
    `
  }
  </code></pre>
  
  <p><strong>Client.js:</strong></p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import TwoFA from './App';
  import {
      MuiThemeProvider,
      createMuiTheme,
      createGenerateClassName,
    } from '@material-ui/core/styles';
  import green from '@material-ui/core/colors/green';
  import red from '@material-ui/core/colors/red';
  
  class Main extends React.Component{
      componentDidMount() {
          const jssStyles = document.getElementById('jss-server-side');
          if (jssStyles &amp;&amp; jssStyles.parentNode) {
            jssStyles.parentNode.removeChild(jssStyles);
          }
      }
  
      render(){
          return &lt;TwoFA /&gt;
      }
  }
  
  const theme = createMuiTheme({
      palette: {
        primary: green,
        accent: red,
        type: 'light',
      },
    });
  
  const generateClassName = createGenerateClassName();
  
  if (typeof window !== 'undefined'){
      ReactDOM.hydrate(
          &lt;JssProvider generateClassName={generateClassName}&gt;
            &lt;MuiThemeProvider theme={theme}&gt;
                &lt;TwoFA/&gt;
            &lt;/MuiThemeProvider&gt;
          &lt;/JssProvider&gt;,
          document.querySelector('#app'),
      );
  }
  </code></pre>
  
  <p><strong>Webpack.config.js</strong></p>
  
  <pre><code>module.exports = [
      {
          /*Config for backend code*/ 
          entry: './src/server/server.js',
          output: {
              filename: 'server.js'
          },
          externals: [nodeExternals()],
          module: {
              rules: [
                  {
                      test: /\.(js|jsx)$/,
                      exclude: /node_modules/,
                      use: {
                          loader: "babel-loader"
                      }
                  },
                  {
                      test: /\.html$/,
                      use: {
                          loader: "html-loader",
                          options: { minimize: true }
                      }
                  },
                  {
                      test: /\.css$/,
                      use: [MiniCssExtractPlugin.loader,"css-loader"]
                  }
              ]
          },
          plugins: [
              new HtmlWebPackPlugin({
                  template: "./public/index.html",
                  filename:"./index.html"
              }),
              new MiniCssExtractPlugin({
                  filename: "[name].css",
                  chunkFilename:"[id].css"
              })
          ]
      },
      { 
          entry: './src/client.js',
          output: {
             filename: 'bundle.js',
          },
          module: {
             rules: [
                  {
                      test: /\.js$/,
                      exclude: /node_modules/,
                      loader: 'babel-loader',
                  },
                  {
                      test: /\.html$/,
                      use: {
                          loader: "html-loader",
                          options: { minimize: true }
                      }
                  },
                  {
                      test: /\.css$/,
                      use: [MiniCssExtractPlugin.loader,"css-loader"]
                  }
              ],
          },
          plugins: [
              new HtmlWebPackPlugin({
                  template: "./public/index.html",
                  filename:"./index.html"
              }),
              new MiniCssExtractPlugin({
                  filename: "[name].css",
                  chunkFilename:"[id].css"
              })
          ]
      }
  ]
  </code></pre>
  
  <p><strong>What I have tried:</strong> I search on SO and found that many posts suggesting put a condition check like so : <code>if (typeof window !== 'undefined')</code>. However, this does not solve the problem.</p>
  
  <p>I also understood that the error is due to the fact that during SSR, server-side has no <strong>document</strong> project. </p>
  
  <p>I have searched on github issue page and someone mentioned that he ran into the problem with webpack, but same project worked fine with browserify.</p>
  
  <p><strong>What I need help with</strong>: I am trying to solve this problem as it cause the app to break.</p>
  
  <p>I am suspecting that there is something wrong with webpack. I am looking a fix for this</p>