Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

In a Next.js app when you go to a page via a <Link /> click the lines don't load, but when you refresh the page the lines work

See original GitHub issue

Hey! I was working on a project and noticed this bug and was wondering if you have seen it before? More than happy to look into it and open a PR up.

One thing to note is that I get tons of these errors below both when the arrows don’t show up after accessing the page via a Next.js <Link /> click and also when the arrows work accessing the page directly.

Issue Analytics

State:
Created 10 months ago
Comments:6 (4 by maintainers)

Top GitHub Comments

1reaction

louislefebvrecommented, Dec 6, 2022

Thanks for the quick fix!

Lines are 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

1reaction

pierpocommented, Dec 5, 2022

4.2.1 published, problem should be solved 😊

Thank you!

Please feel free to re-open if it’s not.