Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Head not working correctly on catch boundaries #5

Open
moishinetzer opened this issue Feb 20, 2023 · 2 comments
Open

Head not working correctly on catch boundaries #5

moishinetzer opened this issue Feb 20, 2023 · 2 comments
Labels
bug Something isn't working help wanted Extra attention is needed

Comments

@moishinetzer
Copy link

When catch boundaries are hit, styles and other links are not loaded correctly into the head tag.

Error boundaries, however, work completely fine.

image
@Xiphe
Copy link
Owner

Xiphe commented Feb 20, 2023

Good Catch (pun intended)! Will have a look into this in the coming days.

@Xiphe Xiphe added bug Something isn't working help wanted Extra attention is needed labels Feb 20, 2023
@Xiphe
Copy link
Owner

Xiphe commented Feb 20, 2023

Digged a little bit into this, here's what I found:

  1. when we just follow the remix guidelines for setting up a catch boundary it wont render styles even when we don't use remix-island.
  2. In order to have styles in a catch boundary, we need to explicitly add <Links /> in there or manually <link /> to them.
  3. In a remix-island app, this would mean we'd want to render <Head /> in the catch boundary
  4. Unfortunately this does not work, either
  5. If we also add <Scripts /> back in our catch boundary we get the styles in the client, but they're missing in the initial server render

From what I understand, remix deliberately does not teat the catch-boundary as part of the route. It's a "hey nothing you configured matches this, we don't know what to do here" scenario. Where it might be just false to add the same links, meta-tags to the page as the status: 200 version of the same page has.

I'm not sure how to handle this case in remix-island, the first thought coming to mind is that we'd need a CatchBoundaryHead component but that also feels a little strange.

All that said... as written in the pitfalls/notes section of the readme I think it makes sense to move everything global out of remix LinksFunction and MetaFunction and into the static html template in entry.server.ts. And if you put your styles in there you should at least have those loaded on 404 pages.
(I understand that does not help with setting a custom title or tracking for those pages)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working help wanted Extra attention is needed
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@Xiphe @moishinetzer