search

pierpo / react-archer

🏹 Draw arrows between React elements 🖋
https://pierpo.github.io/react-archer/
MIT License
1.15k stars 67 forks source link

Remix: react-archer seems to not be compatible with SSR #186

Closed louislefebvre closed 1 year ago

louislefebvre commented 1 year ago

Thanks for the quick fix with 4.2.1!

Lines are now drawn, but there is now this following error output in Remix server console:

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://reactjs.org/link/uselayouteffect-ssr for common fixes.

On my side, this got fixed using this remix utility to use my component client side only: https://github.com/sergiodxa/remix-utils#clientonly

I wanted to share the fix I have found here, although in case you have another way to manage it with SSR, I would love to hear your opinion :)!

Originally posted by @louislefebvre in https://github.com/pierpo/react-archer/issues/184#issuecomment-1338990175

pierpo commented 1 year ago

Hey! Thank you indeed, I noticed this while working on the fix. I should've bothered fixing ;)

The "fix" I thought of, tough, is merely an ignore of the warning: https://medium.com/@alexandereardon/uselayouteffect-and-ssr-192986cdcf7a Which would be fine since there is no other solution haha. We can't have the server draw the arrows, so it makes sense.

pierpo commented 1 year ago

Fixed with 4.2.2!

louislefebvre commented 1 year ago

Thanks a lot for the quick fix and the medium post! :heart_eyes: However I notice that 4.2.2 has not been published to npmjs.

pierpo commented 1 year ago

Oops! Forgot to run the publish command, haha. Thank you, done!