<p dir="auto">Support for <a href="https://github.com/necolas/react-native-web">react-native-web</a> <em>worked in Next.js 4</em>, but now throws an error when upgrading to Next.js 5. From my research, this would appear to be related to an issue that has been closed in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="208229415" data-permission-text="Title is private" data-url="https://github.com/necolas/react-native-web/issues/364" data-hovercard-type="issue" data-hovercard-url="/necolas/react-native-web/issues/364/hovercard" href="https://github.com/necolas/react-native-web/issues/364">necolas/react-native-web#364</a>.</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">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">The Next.js server should successfully compile and load the application without errors.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">The Next.js server throws an error and failed to compile.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="ERROR  Failed to compile with 1 errors

This dependency was not found:

* react-dom/unstable-native-dependencies in ./node_modules/react-native-web/dist/modules/injectResponderEventPlugin/index.js

To install it, you can run: npm install --save react-dom/unstable-native-dependencies"><pre class="notranslate"><code class="notranslate">ERROR  Failed to compile with 1 errors

This dependency was not found:

* react-dom/unstable-native-dependencies in ./node_modules/react-native-web/dist/modules/injectResponderEventPlugin/index.js

To install it, you can run: npm install --save react-dom/unstable-native-dependencies
</code></pre></div>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<ol dir="auto">
<li>Spin up Next.js 5 project</li>
<li><code class="notranslate">yarn add react-native-web</code></li>
<li><code class="notranslate">yarn add -D babel-plugin-react-native-web</code></li>
<li>Add <code class="notranslate">.babelrc</code> configured for the plugin installed in previous step</li>
<li><a href="https://github.com/necolas/react-native-web/issues/462#issuecomment-298721158" data-hovercard-type="issue" data-hovercard-url="/necolas/react-native-web/issues/462/hovercard">Setup Next.js with <code class="notranslate">react-native-web</code></a> (see slightly different example below to match latest version of <code class="notranslate">react-native-web</code>)</li>
<li><code class="notranslate">yarn start</code></li>
</ol>
<h2 dir="auto">Context</h2>
<p dir="auto">The Next.js application is unable to compile.</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.0.0</td>
</tr>
<tr>
<td>node</td>
<td>8.9.4</td>
</tr>
<tr>
<td>OS</td>
<td>macOS 10.13.3</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome 64.0.3282.140</td>
</tr>
<tr>
<td>react-native-web</td>
<td>0.4.0</td>
</tr>
</tbody>
</table>
<h2 dir="auto">Custom Document</h2>
<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 React from 'react';
import { AppRegistry } from 'react-native-web';
import { renderToStaticMarkup } from 'react-dom/server';

export default class MyDocument extends Document {
  static async getInitialProps({ renderPage }) {
    AppRegistry.registerComponent('Main', () =&gt; Main);
    const { getStyleElement } = AppRegistry.getApplication('Main');
    const page = renderPage();
    const styles = [getStyleElement()];
    return { ...page, styles };
  }

  render() {
    return (
      &lt;html style={{ height: '100%', width: '100%' }}&gt;
        &lt;Head /&gt;
        &lt;body style={{ height: '100%', width: '100%', overflowY: 'scroll' }}&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-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-kos">{</span> <span class="pl-v">AppRegistry</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'react-native-web'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">renderToStaticMarkup</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'react-dom/server'</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-v">MyDocument</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-k">async</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-v">AppRegistry</span><span class="pl-kos">.</span><span class="pl-en">registerComponent</span><span class="pl-kos">(</span><span class="pl-s">'Main'</span><span class="pl-kos">,</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-v">Main</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-k">const</span> <span class="pl-kos">{</span> getStyleElement <span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-v">AppRegistry</span><span class="pl-kos">.</span><span class="pl-en">getApplication</span><span class="pl-kos">(</span><span class="pl-s">'Main'</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-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-k">const</span> <span class="pl-s1">styles</span> <span class="pl-c1">=</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-kos">;</span>
    <span class="pl-k">return</span> <span class="pl-kos">{</span> ...<span class="pl-s1">page</span><span class="pl-kos">,</span> styles <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">style</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">{</span> <span class="pl-c1">height</span>: <span class="pl-s">'100%'</span><span class="pl-kos">,</span> <span class="pl-c1">width</span>: <span class="pl-s">'100%'</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">Head</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-ent">body</span> <span class="pl-c1">style</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">{</span> <span class="pl-c1">height</span>: <span class="pl-s">'100%'</span><span class="pl-kos">,</span> <span class="pl-c1">width</span>: <span class="pl-s">'100%'</span><span class="pl-kos">,</span> <span class="pl-c1">overflowY</span>: <span class="pl-s">'scroll'</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-kos">}</span></pre></div>
<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>
<p dir="auto">Hi Everyone,</p>
<p dir="auto">I have this minimalistic example</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const myFunction = (x) =&gt; (x * 2)

export default class Page extends React.Component {
  static async getInitialProps(props) {
    return {
      foo: 'Hello World',
      bar: x =&gt; myFunction(x),
    }
  }

  render() {
    return (
      &lt;div&gt;
        {this.props.foo}
        {this.props.bar(21)}
      &lt;/div&gt;
    )
  }
}"><pre class="notranslate"><code class="notranslate">const myFunction = (x) =&gt; (x * 2)

export default class Page extends React.Component {
  static async getInitialProps(props) {
    return {
      foo: 'Hello World',
      bar: x =&gt; myFunction(x),
    }
  }

  render() {
    return (
      &lt;div&gt;
        {this.props.foo}
        {this.props.bar(21)}
      &lt;/div&gt;
    )
  }
}
</code></pre></div>
<p dir="auto">Of course I'm expecting "Hello World 42" but the <code class="notranslate">bar</code> prop doesn't get passed. I am assuming next doesn't support passing functions in getInitialProps, but I couldn't find it in the documentation.</p>
<h2 dir="auto">Expected Behavior</h2>
<ul dir="auto">
<li>If we don't support this, can we have better error messages? My actual example was more complicated, so it took me a while to figure out what was causing it.</li>
</ul>
<h2 dir="auto">Current Behavior</h2>
<ul dir="auto">
<li>Currently I'm getting:</li>
</ul>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="TypeError: this.props.bar is not a function
    at Page.render (page.js?8081a23:131)
    at Page.render (createPrototypeProxy.js?b9f4a89:44)
    at finishClassComponent (react-dom.development.js?3fc7954:7873)
    at updateClassComponent (react-dom.development.js?3fc7954:7850)
    at beginWork (react-dom.development.js?3fc7954:8225)
    at performUnitOfWork (react-dom.development.js?3fc7954:10224)
    at workLoop (react-dom.development.js?3fc7954:10288)
    at HTMLUnknownElement.callCallback (react-dom.development.js?3fc7954:542)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?3fc7954:581)
    at invokeGuardedCallback (react-dom.development.js?3fc7954:438)"><pre class="notranslate"><code class="notranslate">TypeError: this.props.bar is not a function
    at Page.render (page.js?8081a23:131)
    at Page.render (createPrototypeProxy.js?b9f4a89:44)
    at finishClassComponent (react-dom.development.js?3fc7954:7873)
    at updateClassComponent (react-dom.development.js?3fc7954:7850)
    at beginWork (react-dom.development.js?3fc7954:8225)
    at performUnitOfWork (react-dom.development.js?3fc7954:10224)
    at workLoop (react-dom.development.js?3fc7954:10288)
    at HTMLUnknownElement.callCallback (react-dom.development.js?3fc7954:542)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?3fc7954:581)
    at invokeGuardedCallback (react-dom.development.js?3fc7954:438)
</code></pre></div>
<p dir="auto">However only when it is rendering on the client side. On the server the <code class="notranslate">bar</code> prop gets passed without any problems.</p>
<ul dir="auto">
<li>This is a mismatch between rendering on the server and the client.</li>
</ul>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto">See snippet</p>
<h2 dir="auto">Context</h2>
<p dir="auto">I don't know if we are able to support this at all, but it would be really helpful if a solution is available. I'm working on a headless CMS and I need to be able to render my react components on the server and on the client.</p>
<p dir="auto">Is there a workaround?</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.2.1</td>
</tr>
<tr>
<td>react</td>
<td>16.0.0</td>
</tr>
<tr>
<td>node</td>
<td>v8.9.1</td>
</tr>
<tr>
<td>OS</td>
<td>osX</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome</td>
</tr>
</tbody>
</table>