Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
1 task done
dcalhoun opened this issue Feb 9, 2018 · 3 comments
Closed
1 task done

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

dcalhoun opened this issue Feb 9, 2018 · 3 comments

Comments

@dcalhoun
Copy link
Contributor

dcalhoun commented Feb 9, 2018 •
edited
Loading

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)

  1. Spin up Next.js 5 project
  2. yarn add react-native-web
  3. yarn add -D babel-plugin-react-native-web
  4. Add .babelrc configured for the plugin installed in previous step
  5. Setup Next.js with react-native-web (see slightly different example below to match latest version of react-native-web)
  6. 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>
    );
  }
}
@arunoda
Copy link
Contributor

arunoda commented Feb 9, 2018

@dcalhoun we fixed a related issue for this.
Could you try this version: https://github.com/zeit/next.js/releases/tag/5.0.1-canary.2

@dcalhoun
Copy link
Contributor Author

dcalhoun commented Feb 9, 2018

@arunoda for posterity, the fix within next@5.0.1-canary.2 does resolve this issue. Thank you!

@dcalhoun dcalhoun mentioned this issue Feb 9, 2018
Closed
@reel
Copy link
Contributor

reel commented Feb 9, 2018

This fixes issues with react-dom/server also.

I was using react-quill and 5.0.0 broke the whole thing. using canary.2 fixes that.

Thanks! Good job folks!

@lusan lusan mentioned this issue Mar 24, 2018
Closed
@lock lock bot locked as resolved and limited conversation to collaborators Feb 9, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@arunoda @dcalhoun @reel @timneutkens