<h1 dir="auto">Bug report</h1>
<h2 dir="auto">Describe the bug</h2>
<p dir="auto">Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:</p>
<ol dir="auto">
<li>You might have mismatching versions of React and the renderer (such as React DOM)</li>
<li>You might be breaking the Rules of Hooks</li>
<li>You might have more than one copy of React in the same app<br>
See <a href="https://fb.me/react-invalid-hook-call" rel="nofollow">https://fb.me/react-invalid-hook-call</a> for tips about how to debug and fix this problem.</li>
</ol>
<h2 dir="auto">To Reproduce</h2>
<details>
<summary>Details</summary>
So the error points on this code
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="
static async getInitialProps (ctx) {
    const sheet = new ServerStyleSheet()
    const originalRenderPage = ctx.renderPage
    const {
      req: { locale, localeDataScript }
    } = ctx
    try {
      ctx.renderPage = () =&gt;
        originalRenderPage({
          enhanceApp: App =&gt; props =&gt; sheet.collectStyles(&lt;App {...props} /&gt;)
        })

      const initialProps = await Document.getInitialProps(ctx)
      return {
        ...initialProps,
        userAgent: ctx.req.headers['user-agent'],
        helmet: Helmet.renderStatic(),
        locale,
        localeDataScript,
        styles: (
          &lt;&gt;
            {initialProps.styles}
            {sheet.getStyleElement()}
          &lt;/&gt;
        )
      }
    } finally {
      sheet.seal()
    }
  }"><pre class="notranslate"><code class="notranslate">
static async getInitialProps (ctx) {
    const sheet = new ServerStyleSheet()
    const originalRenderPage = ctx.renderPage
    const {
      req: { locale, localeDataScript }
    } = ctx
    try {
      ctx.renderPage = () =&gt;
        originalRenderPage({
          enhanceApp: App =&gt; props =&gt; sheet.collectStyles(&lt;App {...props} /&gt;)
        })

      const initialProps = await Document.getInitialProps(ctx)
      return {
        ...initialProps,
        userAgent: ctx.req.headers['user-agent'],
        helmet: Helmet.renderStatic(),
        locale,
        localeDataScript,
        styles: (
          &lt;&gt;
            {initialProps.styles}
            {sheet.getStyleElement()}
          &lt;/&gt;
        )
      }
    } finally {
      sheet.seal()
    }
  }
</code></pre></div>
</details>
<h2 dir="auto">Screenshots</h2>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/15810023/59897059-8a7e3480-941d-11e9-942f-b082ce1ee766.png"><img src="https://user-images.githubusercontent.com/15810023/59897059-8a7e3480-941d-11e9-942f-b082ce1ee766.png" alt="Screen Shot 2019-06-21 at 12 10 08 PM" style="max-width: 100%;"></a></p>
<h2 dir="auto">Additional context</h2>
<p dir="auto">I suspect that it treats the <code class="notranslate">ctx.renderPage = () =&gt; </code> as a react hooks.</p>
<p dir="auto">We are working on a Very large project with several dependencies, when building the project we get a  <code class="notranslate">FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory</code>.</p>


<ul dir="auto">
<li>[ x] 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">When running <code class="notranslate">yarn build</code> I should get a working production bundle</p>

<h2 dir="auto">Current Behavior</h2>

<p dir="auto">When running <code class="notranslate">yarn build</code> I get <code class="notranslate">FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory</code>.</p>

<p dir="auto">After several hours of debugging I found out that the origin of this problem comes from <a href="https://github.com/zeit/next.js/blob/canary/server/build/index.js#L72">https://github.com/zeit/next.js/blob/canary/server/build/index.js#L72</a><br>
more exactly the <code class="notranslate">JSON.stringify</code> function, given that our stats file is 260MB, node can't handle it.</p>
<p dir="auto">I was able to patch it using streams and make it work ok, I'll make a PR for this tomorrow.</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>4.1.4</td>
</tr>
<tr>
<td>node</td>
<td>8.9.1</td>
</tr>
<tr>
<td>OS</td>
<td>Ubuntu 16.04</td>
</tr>
<tr>
<td>browser</td>
<td>N/A</td>
</tr>
</tbody>
</table>