Issue 1:
Support for react-native-web worked in Next.js 4, 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 necolas/react-native-web#364.

I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

The Next.js server should successfully compile and load the application without errors.

Current Behavior

The Next.js server throws an error and failed to compile.

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

Steps to Reproduce (for bugs)

Spin up Next.js 5 project

yarn add react-native-web

yarn add -D babel-plugin-react-native-web

Add .babelrc configured for the plugin installed in previous step

Setup Next.js with react-native-web (see slightly different example below to match latest version of react-native-web)

yarn start

Context

The Next.js application is unable to compile.

Your Environment

Tech
Version

next
5.0.0

node
8.9.4

OS
macOS 10.13.3

browser
Chrome 64.0.3282.140

react-native-web
0.4.0

Custom Document

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', () => Main);
const { getStyleElement } = AppRegistry.getApplication('Main');
const page = renderPage();
const styles = [getStyleElement()];
return { ...page, styles };
}

render() {
return (
<html style={{ height: '100%', width: '100%' }}>
<Head />
<body style={{ height: '100%', width: '100%', overflowY: 'scroll' }}>
<Main />
<NextScript />
</body>
</html>
);
}
}

Issue 2:
I have searched the issues of this repository and believe that this is not a duplicate.

Hi Everyone,

I have this minimalistic example

const myFunction = (x) => (x * 2)

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

render() {
return (
<div>
{this.props.foo}
{this.props.bar(21)}
</div>
)
}
}

Of course I'm expecting "Hello World 42" but the bar 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.

Expected Behavior

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.

Current Behavior

Currently I'm getting:

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)

However only when it is rendering on the client side. On the server the bar prop gets passed without any problems.

This is a mismatch between rendering on the server and the client.

Steps to Reproduce (for bugs)

See snippet

Context

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.

Is there a workaround?

Your Environment

Tech
Version

next
4.2.1

react
16.0.0

node
v8.9.1

OS
osX

browser
Chrome