Can't use errorComponent in createLazyFileRoute

[umar006]

Describe the bug

I tried to use errorComponent in createLazyFileRoute but the component didn't show up when an error happened from the loader. But when I put errorComponent in createFileRoute it's working like what I expected (the component shows up).

I want to know why it's like that because in https://tanstack.com/router/v1/docs/framework/react/guide/code-splitting, errorComponent is supported by the createLazyFileRoute

Your Example Website or App

https://stackblitz.com/edit/tanstack-router-gtkrcc?file=src%2Froutes%2Findex.lazy.tsx

Steps to Reproduce the Bug or Issue

1. open the example app in stackblitz
2. uncomment errorComponent in createLazyFileRoute, the component not show up
3. uncomment errorComponent in createFileRoute, the component show up

Expected behavior

I was expecting the 'errorComponent' to show up from the 'createLazyFileRoute'

Screenshots or Videos

No response

Platform

• OS: Linux
• Browser: Chrome
• Version: 122.0.6261.111

Thank you

[AndreiTS]

You need both files:

• createLazyFileRoute with the component
• createFileRoute with errorComponent

https://tanstack.com/router/v1/docs/framework/react/guide/code-splitting#using-the-lazytsx-suffix

[umar006]

it's working, thank you

but I want to know, why I can't use errorComponent in createLazyFileRoute?
because in https://tanstack.com/router/v1/docs/framework/react/guide/code-splitting, errorComponent is supported by the createLazyFileRoute

[AndreiTS]

oh, thats true, idk why it was not working.

[TkDodo]

I think this is a bug. According to the types and docs, we should be able to define errorComponent and pendingComponent alongside component in the .lazy.tsx file, so that they are code-split as well...

[schiller-manuel]

but the problem is that the loader, which is not code split, causes an error. then the error component is not available.

[TkDodo]

If the loader errors, I would expect the errorComponent to be lazy-loaded and then rendered, just like the component is also lazy-loaded and rendered when the loader is successful.

[SeanCassiere]

Re-tested with the latest version of TSR (1.28.7) and this now works.

Sandbox for testing: https://stackblitz.com/edit/tanstack-router-so1rct?file=src%2Froutes%2Findex.tsx