Home-rolled "is Component?" test is throwing false negatives for React 16.3.0 features

[jamesreggio]

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

Overview

React 16.3 will include a utility for ref forwarding called React.forwardRef. Its RFC has been ratified and the initial implementation is available in alpha builds of 16.3.

The typeof objects returned by forwardRef happens to be "object", not "function", which means that if you wrap your Page component in a HOC that uses forwardRef, it will fail the overly-aggressive test here.

Expected Behavior

If I wrap a top-level Page component with React.forwardRef, I expect Next.js to render it without issue.

Current Behavior

If I wrap a top-level Page component with React.forwardRef, Next.js throws the following error:

Error: The default export is not a React Component in page: ...

Steps to Reproduce (for bugs)

For any Page component in a Next.js app, add the following lines:

// ...
const MyPage = () => (...);
export default React.forwardRef((props, ref) => <MyPage {...props} forwardedRef={ref} />);

Context

As soon as the forwardRef API is released, library that expose HOCs are going to start using it to provide a standard way of accessing the ref of the wrapped component. (Prior to this, each HOC library would take a slightly different approach.)

As more libraries and apps are updated, the number of people impacted will grow. I expect this to happen fairly rapidly, at least for actively-maintained libraries.

Your Environment

Tech	Version
next	5.0.1-canary.17

[elliottsj]

I'm also experiencing this, using Next.js v6.1.1.

Based on facebook/react#12453, it sounds like the way forward is to replace the current check with ReactIs.isValidElementType(Component): https://github.com/facebook/react/tree/v16.4.2/packages/react-is#determining-if-a-component-is-valid

I'm trying this out now and it appears to work well. Pull request coming.

[elliottsj]

Pull request is here: #5095

FWIW, I found this issue using react-cookie, using this workaround in the meantime:

// pages/index.js

const AppWithCookies = withCookies(App);
export default () => <AppWithCookies />;

// compared to this, which produces an error:
// export default withCookies(App);

[timneutkens]

#5095 implement pretty much all that is needed for this to work, it had some merge conflicts however. So if someone wants to take on this issue feel free to 🙏