Server side rendering fails when GatewayDest is declared before the Gateway component

[richardscarrott]

I've been using react-gateway for years because of it's support for SSRing and it's been great, however I've recently run into a bug where the component does not render if the GatewayDest is declared before the Gateway. e.g.

// This does *not* server side render
const App: React.FunctionComponent<any> = ({}) => {
  return (
    <>
      <GatewayDest name="foo" />
      <Gateway into="foo">
        <div>Hello World</div>
      </Gateway>
    </>
  );
};

// This does server side render
const App: React.FunctionComponent<any> = ({}) => {
  return (
    <>
      <Gateway into="foo">
        <div>Hello World</div>
      </Gateway>
      <GatewayDest name="foo" />
    </>
  );
};

When you think about it this makes perfect sense as, in the first example, the gateway destination isn't aware of the gateway component as it's not yet rendered.

I think it's taken me this long to discover this issue because 99% of my use-cases have been to render modals or tooltips etc. which have always lived at the bottom of the page, however I'm now using it to render a notification banner at the top of the page which causes this issue.

Honestly, although I haven't looked into the code, I expect this would be quite challenging to fix but would be interested to hear otherwise?

If it's a "won't fix", perhaps you'd accept a PR to update the docs with this limitation?