<PrefetchPageLinks /> crashes the page when there is a query param in the URL

[samstanding]

What version of Remix are you using?

1.6.1

Steps to Reproduce

1. Add a <PrefetchPageLinks /> to an active route.
2. Add some query params to your URL ie ?query and hit return to reload the page
3. Observe:

Expected Behavior

I would expect the page to load, unless there's some behavior with PrefetchPageLinks I was not aware of where it can't be rendered on a page with query params.

Actual Behavior

The page crashes and we see the following window is not defined error

[machour]

Verified on 1.6.4 as well

[mcansh]

tracking this internally now, and I plan to look into it today!

edit: OP actually has a potential fix for this via #3791

edit 2: actually looking over this more, the issue at hand is we use window in PrefetchPageLinks so we can get the current url as well as get the proper links depending on media queries, but i know we have a internal ticket for that already. Usage in the Link component is to conditionally rendered depending on intent https://github.com/remix-run/remix/blob/142aedc69b62633c4a6ebd49c0ae333255aa5d5a/packages/remix-react/components.tsx#L499 - but gonna look into a broader fix for this, first thought is return early if typeof document === "undefined" as ideally we don't render these during SSR, but we'll see

[samstanding]

Hey @mcansh any updates? Is it possible to use my PR as a stopgap so that we can use PrefetchPageLinks if there's a query param?

[mcansh]

@samstanding not currently, do you have a use case where you can't conditionally render <PrefetchPageLinks>?

skipping them during the server render and applying them during hydration would more than likely cause a hydration warning

[samstanding]

@samstanding not currently, do you have a use case where you can't conditionally render <PrefetchPageLinks>?

skipping them during the server render and applying them during hydration would more than likely cause a hydration warning

@mcansh I can conditionally render it but we're using it to help a slow endpoint so it would be preferred to use it across the board. Right I'm doing something like {!location.search && <PrefetchPageLinks />}

[danielgangl]

This is still broken for me. Any updates?

[danielgangl]

using 'typeof document !== "undefined"' now to conditionally render the PrefetchPageLinks component as a workaround

[brophdawg11]

I don't think this is an issue anymore since 1.10.0 and the incorporation of RouterProvider from react-router-dom