<h1 dir="auto">Bug report</h1>
<h2 dir="auto">Describe the bug</h2>
<p dir="auto">my library is ui component library that depends <a href="https://github.com/css-modules/css-modules">css modules</a></p>
<h2 dir="auto">To Reproduce</h2>
<h2 dir="auto">Expected behavior</h2>
<p dir="auto">works css loader to my library code as well</p>
<h2 dir="auto">Screenshots</h2>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/690661/47146394-e466b180-d306-11e8-9ec2-abebd9a8452f.png"><img width="900" alt="2018-10-18 6 45 34" src="https://user-images.githubusercontent.com/690661/47146394-e466b180-d306-11e8-9ec2-abebd9a8452f.png" style="max-width: 100%;"></a></p>
<h3 dir="auto"><code class="notranslate">my-library/MyComponent/index.js</code></h3>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/690661/47146447-0102e980-d307-11e8-8c09-11a254d06c7d.png"><img src="https://user-images.githubusercontent.com/690661/47146447-0102e980-d307-11e8-8c09-11a254d06c7d.png" alt="2018-10-18 6 52 35" style="max-width: 100%;"></a></p>
<h2 dir="auto">System information</h2>
<ul dir="auto">
<li>OS: macOS</li>
<li>Version of Next.js: 7.0.1</li>
</ul>
<div class="highlight highlight-source-json notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&quot;dependencies&quot;: {
  &quot;next&quot;: &quot;^7.0.1&quot;,
  &quot;@zeit/next-css&quot;: &quot;^1.0.1&quot;
}"><pre class="notranslate"><span class="pl-ent">"dependencies"</span>: {
  <span class="pl-ent">"next"</span>: <span class="pl-s"><span class="pl-pds">"</span>^7.0.1<span class="pl-pds">"</span></span>,
  <span class="pl-ent">"@zeit/next-css"</span>: <span class="pl-s"><span class="pl-pds">"</span>^1.0.1<span class="pl-pds">"</span></span>
}</pre></div>
<h2 dir="auto">Additional context</h2>
<p dir="auto">similar issues</p>
<ul dir="auto">
<li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="298887880" data-permission-text="Title is private" data-url="https://github.com/vercel/next-plugins/issues/70" data-hovercard-type="issue" data-hovercard-url="/vercel/next-plugins/issues/70/hovercard" href="https://github.com/vercel/next-plugins/issues/70">vercel/next-plugins#70</a></li>
<li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="185577808" data-permission-text="Title is private" data-url="https://github.com/vercel/next.js/issues/105" data-hovercard-type="issue" data-hovercard-url="/vercel/next.js/issues/105/hovercard" href="https://github.com/vercel/next.js/issues/105">#105</a></li>
<li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="362074798" data-permission-text="Title is private" data-url="https://github.com/vercel/next-plugins/issues/273" data-hovercard-type="issue" data-hovercard-url="/vercel/next-plugins/issues/273/hovercard" href="https://github.com/vercel/next-plugins/issues/273">vercel/next-plugins#273</a></li>
<li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="199471918" data-permission-text="Title is private" data-url="https://github.com/vercel/next.js/issues/706" data-hovercard-type="issue" data-hovercard-url="/vercel/next.js/issues/706/hovercard" href="https://github.com/vercel/next.js/issues/706">#706</a></li>
<li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="311649948" data-permission-text="Title is private" data-url="https://github.com/vercel/next.js/issues/4114" data-hovercard-type="issue" data-hovercard-url="/vercel/next.js/issues/4114/hovercard" href="https://github.com/vercel/next.js/issues/4114">#4114</a></li>
<li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="332992670" data-permission-text="Title is private" data-url="https://github.com/vercel/next.js/issues/4617" data-hovercard-type="issue" data-hovercard-url="/vercel/next.js/issues/4617/hovercard" href="https://github.com/vercel/next.js/issues/4617">#4617</a></li>
<li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="334037357" data-permission-text="Title is private" data-url="https://github.com/vercel/next.js/issues/4637" data-hovercard-type="issue" data-hovercard-url="/vercel/next.js/issues/4637/hovercard" href="https://github.com/vercel/next.js/issues/4637">#4637</a></li>
<li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="363567561" data-permission-text="Title is private" data-url="https://github.com/vercel/next.js/issues/5278" data-hovercard-type="issue" data-hovercard-url="/vercel/next.js/issues/5278/hovercard" href="https://github.com/vercel/next.js/issues/5278">#5278</a></li>
</ul>
<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">No errors</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">After upgrading to Next <code class="notranslate">v5</code> and React <code class="notranslate">v16.2</code>, I am getting this error when trying to build my project:<br>
<code class="notranslate">Error: _document.js is not exporting a React element</code></p>
<p dir="auto">Here is what my <code class="notranslate">_document.js</code> looks like. The only thing that differs from the normal <code class="notranslate">_document</code> is that I'm using styled-components.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import Document, { Head, Main, NextScript } from 'next/document';
import { ServerStyleSheet } from 'styled-components';

export default class _Document extends Document {
  static getInitialProps({ renderPage }) {
    const sheet = new ServerStyleSheet();
    const page = renderPage(App =&gt; props =&gt; sheet.collectStyles(&lt;App {...props} /&gt;));
    const styleTag = sheet.getStyleElement();
    return { ...page, styleTag };
  }

  render() {
    return (
      &lt;html lang=&quot;en&quot;&gt;
        &lt;Head&gt;
          {this.props.styleTag}
        &lt;/Head&gt;
        &lt;body&gt;
          &lt;Main /&gt;
          &lt;NextScript /&gt;
        &lt;/body&gt;
      &lt;/html&gt;
    );
  }
}"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-v">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-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-v">ServerStyleSheet</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'styled-components'</span><span class="pl-kos">;</span>

<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-k">class</span> <span class="pl-s1">_Document</span> <span class="pl-k">extends</span> <span class="pl-v">Document</span> <span class="pl-kos">{</span>
  <span class="pl-k">static</span> <span class="pl-en">getInitialProps</span><span class="pl-kos">(</span><span class="pl-kos">{</span> renderPage <span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">const</span> <span class="pl-s1">sheet</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-v">ServerStyleSheet</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-k">const</span> <span class="pl-s1">page</span> <span class="pl-c1">=</span> <span class="pl-en">renderPage</span><span class="pl-kos">(</span><span class="pl-v">App</span> <span class="pl-c1">=&gt;</span> <span class="pl-s1">props</span> <span class="pl-c1">=&gt;</span> <span class="pl-s1">sheet</span><span class="pl-kos">.</span><span class="pl-en">collectStyles</span><span class="pl-kos">(</span><span class="pl-c1">&lt;</span><span class="pl-ent">App</span> <span class="pl-kos">{</span>...<span class="pl-s1">props</span><span class="pl-kos">}</span> <span class="pl-c1">/</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-k">const</span> <span class="pl-s1">styleTag</span> <span class="pl-c1">=</span> <span class="pl-s1">sheet</span><span class="pl-kos">.</span><span class="pl-en">getStyleElement</span><span class="pl-kos">(</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-s1">page</span><span class="pl-kos">,</span> styleTag <span class="pl-kos">}</span><span class="pl-kos">;</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-k">return</span> <span class="pl-kos">(</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">html</span> <span class="pl-c1">lang</span><span class="pl-c1">=</span><span class="pl-s">"en"</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-ent">Head</span><span class="pl-c1">&gt;</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-c1">styleTag</span><span class="pl-kos">}</span>
        <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Head</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-ent">body</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-kos">}</span></pre></div>
<p dir="auto">My <code class="notranslate">.babelrc</code>:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="{
  &quot;presets&quot;: [
    &quot;next/babel&quot;
  ],
  &quot;plugins&quot;: [
    &quot;transform-decorators-legacy&quot;,
    [
      &quot;inline-react-svg&quot;,
      {
        &quot;svgo&quot;: {
          &quot;plugins&quot;: [
            {
              &quot;removeAttrs&quot;: {
                &quot;attrs&quot;: &quot;(data-name)&quot;
              }
            },
            {
              &quot;cleanupIDs&quot;: false
            }
          ]
        }
      }
    ],
    [
      &quot;styled-components&quot;,
      {
        &quot;ssr&quot;: true,
        &quot;displayName&quot;: true,
        &quot;preprocess&quot;: false
      }
    ],
    [
      &quot;transform-assets-import-to-string&quot;,
      {
        &quot;baseDir&quot;: &quot;static&quot;,
        &quot;baseUri&quot;: &quot;/&quot;
      }
    ],
  ],
}"><pre class="notranslate"><span class="pl-kos">{</span>
  <span class="pl-s">"presets"</span>: <span class="pl-kos">[</span>
    <span class="pl-s">"next/babel"</span>
  <span class="pl-kos">]</span><span class="pl-kos">,</span>
  <span class="pl-s">"plugins"</span>: <span class="pl-kos">[</span>
    <span class="pl-s">"transform-decorators-legacy"</span><span class="pl-kos">,</span>
    <span class="pl-kos">[</span>
      <span class="pl-s">"inline-react-svg"</span><span class="pl-kos">,</span>
      <span class="pl-kos">{</span>
        <span class="pl-s">"svgo"</span>: <span class="pl-kos">{</span>
          <span class="pl-s">"plugins"</span>: <span class="pl-kos">[</span>
            <span class="pl-kos">{</span>
              <span class="pl-s">"removeAttrs"</span>: <span class="pl-kos">{</span>
                <span class="pl-s">"attrs"</span>: <span class="pl-s">"(data-name)"</span>
              <span class="pl-kos">}</span>
            <span class="pl-kos">}</span><span class="pl-kos">,</span>
            <span class="pl-kos">{</span>
              <span class="pl-s">"cleanupIDs"</span>: <span class="pl-c1">false</span>
            <span class="pl-kos">}</span>
          <span class="pl-kos">]</span>
        <span class="pl-kos">}</span>
      <span class="pl-kos">}</span>
    <span class="pl-kos">]</span><span class="pl-kos">,</span>
    <span class="pl-kos">[</span>
      <span class="pl-s">"styled-components"</span><span class="pl-kos">,</span>
      <span class="pl-kos">{</span>
        <span class="pl-s">"ssr"</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
        <span class="pl-s">"displayName"</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
        <span class="pl-s">"preprocess"</span>: <span class="pl-c1">false</span>
      <span class="pl-kos">}</span>
    <span class="pl-kos">]</span><span class="pl-kos">,</span>
    <span class="pl-kos">[</span>
      <span class="pl-s">"transform-assets-import-to-string"</span><span class="pl-kos">,</span>
      <span class="pl-kos">{</span>
        <span class="pl-s">"baseDir"</span>: <span class="pl-s">"static"</span><span class="pl-kos">,</span>
        <span class="pl-s">"baseUri"</span>: <span class="pl-s">"/"</span>
      <span class="pl-kos">}</span>
    <span class="pl-kos">]</span><span class="pl-kos">,</span>
  <span class="pl-kos">]</span><span class="pl-kos">,</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">My <code class="notranslate">next.config.js</code>:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const path = require('path');
const VersionFile = require('webpack-version-file');

module.exports = {
  webpack(config, { buildId, dev }) {
    config = addBuildVersioning(config);
    return config;
  },
};

function addBuildVersioning(config) {
  config.plugins.push(new VersionFile({
    output: path.join('./server', 'version.json'),
    templateString: `{
  &quot;name&quot;: &quot;&lt;% name %&gt;&quot;,
  &quot;version&quot;: &quot;&lt;%= version %&gt;&quot;,
  &quot;buildDate&quot;: &quot;&lt;%= buildDate %&gt;&quot;
}`,
  }));

  return config;
}"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">path</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'path'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-v">VersionFile</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'webpack-version-file'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-c1">exports</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
  <span class="pl-en">webpack</span><span class="pl-kos">(</span><span class="pl-s1">config</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> buildId<span class="pl-kos">,</span> dev <span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-s1">config</span> <span class="pl-c1">=</span> <span class="pl-en">addBuildVersioning</span><span class="pl-kos">(</span><span class="pl-s1">config</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-k">return</span> <span class="pl-s1">config</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span>

<span class="pl-k">function</span> <span class="pl-en">addBuildVersioning</span><span class="pl-kos">(</span><span class="pl-s1">config</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-s1">config</span><span class="pl-kos">.</span><span class="pl-c1">plugins</span><span class="pl-kos">.</span><span class="pl-en">push</span><span class="pl-kos">(</span><span class="pl-k">new</span> <span class="pl-v">VersionFile</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
    <span class="pl-c1">output</span>: <span class="pl-s1">path</span><span class="pl-kos">.</span><span class="pl-en">join</span><span class="pl-kos">(</span><span class="pl-s">'./server'</span><span class="pl-kos">,</span> <span class="pl-s">'version.json'</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
    <span class="pl-c1">templateString</span>: <span class="pl-s">`{</span>
<span class="pl-s">  "name": "&lt;% name %&gt;",</span>
<span class="pl-s">  "version": "&lt;%= version %&gt;",</span>
<span class="pl-s">  "buildDate": "&lt;%= buildDate %&gt;"</span>
<span class="pl-s">}`</span><span class="pl-kos">,</span>
  <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

  <span class="pl-k">return</span> <span class="pl-s1">config</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">Anyone have any idea what may be causing this? Google doesn't come up with much about this error.</p>
<p dir="auto">Thanks!</p>