Prevent warning on SSR context

[ludovicmnji]

🐛 Bug Report

If you use a Teleporter in SSR context app, you will get a warning because of the useLayoutEffect hook in createTeleporter() function.

Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://fb.me/react-uselayouteffect-ssr for common fixes.

To Reproduce

Render an app using server-side rendering.

Expected behavior

It should not emit a warning on Node server.

[gregberge]

For now, react-teleporter is not compatible with SSR.

[slorber]

Didn't study the problem much but what would it take to support SSR?

Is it something you'd like to support if someone implemented this?

I don't know any slot-fill / teleport lib that supports SSR since react-gateway is not maintained and it's annoying me for many use-cases 😅

[richardscarrott]

@slorber I don't think slots / teleporting libs can ever support SSR properly because, for example, react will render the a target in the header before it renders the source in the body.

I ran into this issue here cloudflare/react-gateway#49

[gregberge]

To be clear, it is your responsibility to not use react-teleporter server-side.