<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>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">I'm trying to upgrade from Next 4.2.3 to 5.1. I have styletron set up as per the example provided <a href="https://github.com/zeit/next.js/tree/canary/examples/with-styletron">here</a> with a few tweaks to make it work for version 3 of styletron. When using Next 5.1, the server side rendering isn't rendering the styles correctly. Client-side rehydration is still happening. This is causing a flash of unstyled content when loading a page for the first time.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">In the example, the styletron object is loaded in the getInitialProps function of a custom Document. In 4.2.3, this object is there, but for some reason it's undefined/null in 5.1+.</p>
<p dir="auto">See here: <a href="https://github.com/zeit/next.js/blob/canary/examples/with-styletron/pages/_document.js#L7">https://github.com/zeit/next.js/blob/canary/examples/with-styletron/pages/_document.js#L7</a></p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<ol dir="auto">
<li><code class="notranslate">yarn create next-app --example with-styletron with-styletron-app</code></li>
<li>Remove <code class="notranslate">styletron-client</code> and <code class="notranslate">styletron-server</code> from package.json, add <code class="notranslate">styletron</code> at <code class="notranslate">^3.0.0</code> and update <code class="notranslate">styletron-react</code> to <code class="notranslate">^3.0.0</code></li>
<li>Change line 11 in styletron.js to <code class="notranslate">const Styletron = require('styletron-client').default</code>.</li>
<li>Run the development server, experience the flash of unstyled content. Also observe that the <code class="notranslate">&lt;style&gt;</code> tag that should be re-hydrated is empty.</li>
<li>Try it on 4.2.3. No flash of unstyled content. The rehydrated <code class="notranslate">&lt;style&gt;</code> tag is not empty.</li>
</ol>
<p dir="auto">In 5.1.0, the <code class="notranslate">styletron</code> object on <a href="https://github.com/zeit/next.js/blob/canary/examples/with-styletron/pages/_document.js#L7">this line</a> is undefined/null when server side rendering happens.</p>
<h2 dir="auto">Context</h2>
<p dir="auto">Just trying to upgrade to 5+ to take advantage of the improvements! I'd be more than happy to update the styletron example to the latest version of styletron if we can get this working.</p>
<h2 dir="auto">Your Environment</h2>
<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>next</td>
<td>5.1.0</td>
</tr>
<tr>
<td>node</td>
<td>8.1.3</td>
</tr>
<tr>
<td>OS</td>
<td>Mac</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome</td>
</tr>
</tbody>
</table>
<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">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>


<p dir="auto">My app run smoothly.</p>
<h2 dir="auto">Current Behavior</h2>


<p dir="auto">Throw error</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>


<p dir="auto">I have typescript project, which I cannot use <code class="notranslate">.babelrc</code> to my project. So I decided to make custom babel config via webpack (<code class="notranslate">next.config.js</code>).<br>
This is my custom config in my <code class="notranslate">next.config.ts</code></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="module.exports = {
  webpack: (config: Webpack.Configuration) =&gt; {
    (config.module as Webpack.NewModule).rules.push({
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          plugins: [
            [require('babel-plugin-module-resolver'), {
              root: './',
              alias: {
                '@': './app'
              }
            }]
          ]
        }
      }
    })

    return config
  }
}"><pre lang="tyepscript" class="notranslate"><code class="notranslate">module.exports = {
  webpack: (config: Webpack.Configuration) =&gt; {
    (config.module as Webpack.NewModule).rules.push({
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          plugins: [
            [require('babel-plugin-module-resolver'), {
              root: './',
              alias: {
                '@': './app'
              }
            }]
          ]
        }
      }
    })

    return config
  }
}
</code></pre></div>
<p dir="auto">That will throw an error</p>
<blockquote>
<p dir="auto">error  in ./dist/pages?entry<br>
Module build failed: Error: Plugin 0 specified in "base" provided an invalid property of "defaultExtensions"</p>
</blockquote>
<p dir="auto">Any solution to write babel config via webpack config without <code class="notranslate">.babelrc</code> file?</p>
<h2 dir="auto">Context</h2>


<h2 dir="auto">Your Environment</h2>

<ul dir="auto">
<li>Next.js version: next</li>
<li>Environment name and version (e.g. Chrome 39, Node.js 5.4): node 8</li>
<li>Operating System (Linux, maxOS, Windows): macOS</li>
</ul>