Unstyled flash after navigating away from errorComponent

[MGSimard]

Which project does this relate to?

Start

Describe the bug

Never run into this on a regular Vite/TSRouter project, so I'm gonna mark this as Start.

When navigating away from errorComponent, like a <Link to="/">, I get a flash of unstyled content on arrival.

• Unstyled content flash.
• Head content gets reloaded (lights up in devtools).
• When on localhost, also causes favicon to fall back to an older cached project's favicon.
• Backrouting (browser back button) back towards the error page also causes a flash of unstyled content on arrival.

Browser-specific behaviour? Caching? Issue with hydration due to head being re-rendered, which doesn't usually happen when going between normal routes? Idk. Feels weird that we have to wrap ErrorComponent in a brand new <RootDocument> though.

Reproduced on Chrome, Edge & GX (All Chromium), cannot reproduce on Firefox. Confirmed both in localhost dev & live prod.

Your Example Website or App

Stackblitz won't load the repo, but I've confirmed it happens on a brand new, barebones TSS install - clone/install/dev -> localhost:3000/throwerror -> Click Return Home -> You get unstyled flash: https://github.com/MGSimard/tss-css

Live app: https://cbl-temp.netlify.app/throwerror Repo: https://github.com/MGSimard/cbl/blob/main/src/routes/__root.tsx

Steps to Reproduce the Bug or Issue

(Reproduced on Chrome, GX, Edge - couldn't reproduce on Firefox)

1. Force an error by navigating to https://cbl-temp.netlify.app/throwerror
2. Click "Return Home" (<Link to="/">Return Home</Link>)
3. Get a flash of unstyled content, lose favicon, head re-renders in devtools
4. If you hit back in browser you'll get another flash of unstyled content

Expected behavior

No flash of unstyled content, no loss of favicon triggering a fallback.

Screenshots or Videos

1. Access errorComponent by throwing error in a route:

2. "Return Home" button is clicked (<Link to="/">), flash of unstyled content, favicon falls back to an older localhost app's favicon + head content updates in devtools (see pic @ #3)

3. Bonus pic of devtools

4. Style goes through

Platform

- OS: Windows 10 Version 22H2 (Build 19045.5737) - Browser: Chrome (135.0.7049.116), - Browser2: Opera GX (118.0.5461.76, Chromium 133.0.6943.143) - Browser3: Edge (136.0.3240.64, Chromium 136.0.7103.93)

Can't reproduce on Firefox.

Additional context

Code: https://github.com/MGSimard/cbl/blob/main/src/routes/__root.tsx https://github.com/MGSimard/cbl/blob/main/src/_components/Core/Error.tsx

[akawahuynh]

I'm not sure if it's a bug or a feature of tanstack start but there is a basic fix which is to remove the errorcomponent in __root.tsx, instead add defaultErrorComponent in router.tsx

hope this helps!