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

[jessicabyrne]

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 :+1: 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 :tada:

[developit]

Try this quick workaround for the compat issue:

npm install --save gist:developit/eeebf4c2449c9848dc95aff847d2454d

[jessicabyrne]

@marvinhagemeister Ah I did not mention but with the switch to Preact X I did alias using preact/compat rather than preact-compat.

@developit that workaround did work! Will that be going into the next release of Preact? What did the workaround do?

[jessicabyrne]

Err... I spoke too soon. I forgot I had already made a tweak in the node_module dependency to use a <div> instead of a <Fragment> so it worked with your workaround just fine, but with Fragment it still doesn't work.

[JoviDeCroock]

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

[jessicabyrne]

@JoviDeCroock Thanks for the sandbox! Apparently it's been blocked on my network so I will check it out when I get home.

[JoviDeCroock]

Hey @jessicabyrne had the chanche to take a look if my sandbox captures the problem or am I misunderstanding it?

[jessicabyrne]

Hi @JoviDeCroock I'm getting a 404 for that sandbox. I managed to fix the problem in my own project by using a Webpack plugin to change the element from Fragment to a Div, but I'll have a go and see if there's something else happening.

[JoviDeCroock]

Ah yes, I had to delete all my sandboxes since I was at the limit sorry

[JoviDeCroock]

Closing due to inactivity