[10.0.0-alpha.2] Rerender necessary when importing component using React.forwardRef and Fragments

We have a project written in Preact that is referencing a component from another library (written with React 16) that does not render at all on first render (it will appear if I force a rerender). There is no error or stacktrace. The component we reference looks like this:

import React from "react";

const TheComponent = React.forwardRef((props, ref) => {
  const { ...rest } = props;

  return (
    <OtherComponent {..rest} />
});

export default TheComponent;

The OtherComponent looks like this:

import React, { forwardRef, Fragment } from "react";

const OtherComponent= forwardRef(
  ({  ...otherProps }, ref) => (
    <Fragment key="">
      <input type={type} ref={ref} {...otherProps} />
    </Fragment>
  )
);
export default OtherComponent;

Is this a known issue with Preact X? (which we are now on! 🎉 ) What is the most reliable work-around for this right now?

We thought it might be related to Fragments, because of the reference to OtherComponent, which doesn’t show up on the first render. I tried using the workaround from here: https://github.com/developit/preact/issues/946#issuecomment-353151850 at the top of our file. If I switch back to React, it works fine, but I am definitely a fan of the small bundle with Preact so really want to make this work.

"preact": "10.0.0-alpha.2",
"preact-compat": "3.18.4",
"preact-redux": "2.0.3",

I will try to see if I can replicate in a sandbox, but if there are initial thoughts I would appreciate them!

EDIT: Also if I meddle in node_modules and switch the Fragment to a div it renders fine-- another hint this has to do with Preact and Fragments

[marvinhagemeister]

Thanks for creating the issue 👍 I’m wondering if this is caused by mixing preact-compat which is written for Preact 8 with Preact X. Maybe just aliasing react to preact/compat instead of preact-compat will resolve the issue 🎉

[JoviDeCroock]

I do not seem to have any issues: https://codesandbox.io/s/jvqopz0z05