<p dir="auto">We should use <a href="https://www.npmjs.com/package/detect-port" rel="nofollow">detect-port</a>, which would basically make it much easier to develop because the app will stop throwing an error if the port is in use and just go with a random one instead.</p>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/zeit/next.js/issues?q=is%3Aissue">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<p dir="auto">I'm trying to see if I can wrap the Document inside Redux, using withRedux HOC.</p>
<p dir="auto">But when I do, I get <code class="notranslate">Error: _document.js is not exporting a React element</code></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import React from 'react';
import classnames from 'classnames';
import _Document, { Head, Main, NextScript } from 'next/document'
import withRedux from 'next-redux-wrapper';
import configureStore from '../store/configureStore';

class Document extends _Document {

  render() {
    console.log('----------- document props', this.props);

    return (
      &lt;html&gt;
        &lt;body className={classnames('loan-advisor')}&gt;
          &lt;Main/&gt;
          &lt;NextScript/&gt;
        &lt;/body&gt;
      &lt;/html&gt;
    )
  }
}

// export default Document;
const EnhancedDocument = withRedux(
  configureStore
)(Document);
console.log(EnhancedDocument)

export default EnhancedDocument; // I tried rendering a &lt;EnhancedDocument /&gt; too but doesn't work either"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-v">React</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-s1">classnames</span> <span class="pl-k">from</span> <span class="pl-s">'classnames'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-s1">_Document</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-v">Head</span><span class="pl-kos">,</span> <span class="pl-v">Main</span><span class="pl-kos">,</span> <span class="pl-v">NextScript</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'next/document'</span>
<span class="pl-k">import</span> <span class="pl-s1">withRedux</span> <span class="pl-k">from</span> <span class="pl-s">'next-redux-wrapper'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-s1">configureStore</span> <span class="pl-k">from</span> <span class="pl-s">'../store/configureStore'</span><span class="pl-kos">;</span>

<span class="pl-k">class</span> <span class="pl-v">Document</span> <span class="pl-k">extends</span> <span class="pl-s1">_Document</span> <span class="pl-kos">{</span>

  <span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">'----------- document props'</span><span class="pl-kos">,</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

    <span class="pl-k">return</span> <span class="pl-kos">(</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">html</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-ent">body</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-en">classnames</span><span class="pl-kos">(</span><span class="pl-s">'loan-advisor'</span><span class="pl-kos">)</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
          <span class="pl-c1">&lt;</span><span class="pl-ent">Main</span><span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
          <span class="pl-c1">&lt;</span><span class="pl-ent">NextScript</span><span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">body</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">html</span><span class="pl-c1">&gt;</span>
    <span class="pl-kos">)</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span>

<span class="pl-c">// export default Document;</span>
<span class="pl-k">const</span> <span class="pl-v">EnhancedDocument</span> <span class="pl-c1">=</span> <span class="pl-en">withRedux</span><span class="pl-kos">(</span>
  <span class="pl-s1">configureStore</span>
<span class="pl-kos">)</span><span class="pl-kos">(</span><span class="pl-v">Document</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-v">EnhancedDocument</span><span class="pl-kos">)</span>

<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-v">EnhancedDocument</span><span class="pl-kos">;</span> <span class="pl-c">// I tried rendering a &lt;EnhancedDocument /&gt; too but doesn't work either</span></pre></div>
<p dir="auto">I get the following server output:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="{ [Function: WrappedCmp] getInitialProps: [Function] }
next Error: _document.js is not exporting a React element
next     at _callee3$ (/Users/vadorequest/dev/student-loan-simulator-serverless/aws/loan-advisor/node_modules/next/dist/server/render.js:209:19)
next     at tryCatch (/Users/vadorequest/dev/student-loan-simulator-serverless/aws/loan-advisor/node_modules/regenerator-runtime/runtime.js:62:40)
"><pre class="notranslate"><code class="notranslate">{ [Function: WrappedCmp] getInitialProps: [Function] }
next Error: _document.js is not exporting a React element
next     at _callee3$ (/Users/vadorequest/dev/student-loan-simulator-serverless/aws/loan-advisor/node_modules/next/dist/server/render.js:209:19)
next     at tryCatch (/Users/vadorequest/dev/student-loan-simulator-serverless/aws/loan-advisor/node_modules/regenerator-runtime/runtime.js:62:40)

</code></pre></div>
<p dir="auto">Is what I try to do possible? And is it a good idea?</p>
<p dir="auto">My goal is to do the following:</p>
<ul dir="auto">
<li>Load redux automatically for all pages (which fetch some data in <code class="notranslate">getInitialProps</code></li>
<li>Load react-jss automatically for all pages (depends on redux)</li>
<li>Make react-jss work with SSR (I currently have a blank effect because server doesn't inject styles)</li>
</ul>
<p dir="auto">I've achieved this behaviour already, but with boilerplate in every page that I don't like much, hence the fact I'm trying to simplify all this stuff using the _document.js</p>