React.forwardRef breaks SSR on prepare

[Ryan Couse]

Type of issue

bug

Description

When wrapping a stateless component in a React.forwardRef SSR breaks on prepare.

Current behavior

Error:

TypeError: type is not a function
[36m at prepareElement node_modules/fusion-react-async/src/prepare.js:59:29�

Component:

const Slide = React.forwardRef((props: Props, ref) => {
  return (
     <Styled.SlideOpacity
       $active={props.active}
       $leavingActive={props.leavingActive}
       $ref={ref}
    >
       {props.children}
    </Styled.SlideOpacity>
   );
});

Expected behavior

Wrapping stateless component in React.forwardRef should render SSR without an error.
React Docs - Forwarding Refs

Steps to reproduce

1. Wrap a stateless component in React.forwardRef
2. Reload page

Your environment

• fusion-react-async version: 1.2.3

• Node.js version: v8.11.3

• npm version: 5.6.0

• Operating System: OSX 10.13.5

[Ryan Tsao]

Thanks for the report. Sounds like this might be a similar to the one fixed in #80

[Bobby]

ForwardRefs don't work for me either. Adding a check at line 55 in prepare.js fixes it.

// current
if (typeof type === 'string' || isFragment(element)) {

// fix
if (typeof type === 'string' || isFragment(element) || isForwardRef(element)) {