Next.js: Next.js 5 Throws Error When Using react-native-web

Created on 9 Feb 2018 · 3Comments · Source: vercel/next.js

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.

[x] 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>
    );
  }
}

Source