How to use error and loading in parallel routes in "app" dir ?

[tresorama]

Hi, i'm trying the "app" directory for first time following the official docs.

While testing "parallel routes" I wanted to test the error component.
Looking at this image in the Docs, it should be possible to render different error component (and loading) for different parallel routes.

I defined an error.tsx file inside each @folder of a segment.
Then I triggered a forced error (inside a fetch) , I expect to see segment/@folder/error.tsx rendered, but instead I see segment/error.tsx rendered.

Same thing with loading.tsx, expecting segment/@folder/loading.tsx to be rendered and instead got segment/loading.tsx.

Code demo in codesandbox.
In the demo the segment with parallel routes is under app/jsonplaceholders.

---

This prevent me to render different error component (and loading) for different parallel routes, forcing me to have a shared error (and loading) for the entire segment (that acts as parent for @folder parallel routes)

---

What i want is not possible ? Am I doing something wrong ?

[bagus2x]

Having the same problem. Did you find solution?

[tresorama]

Nope!
Tried again now with 13.4.3

[tresorama]

Related:
#49243 Issue
#50107 (comment) discussion

[lu-zen]

The workaround is putting inside a route group:
@news/(news)/page.tsx,error.tsx,loading.tsx

[tresorama]

Tested and yes, it works!
Better than nothing for now!

Live Demo on codesandbox

[tresorama]

With 13.4.7 this bug is now fixed!!
codesandbox demo

Closing this...

[tresorama]

With 13.4.7 the bug is fixed, but on 13.5 the bug happens again.

[parirox]

but I also have the same issue in next 13.5.* , even though everything works properly in 13.4.7.

[NCSmit]

Hey devs, this routing method works correctly in 13.4.7 but it seems the bug has re-appeared in 13.5^.

Can we open this issue @tresorama ??

[tresorama]

Hey devs, this routing method works correctly in 13.4.7 but it seems the bug has re-appeared in 13.5^.

Reopening this discussion because of this.

[tresorama]

Testing with 13.5.4.
It's working as expected.
codesandbox demo

---

@NCSmit and @ivi3
Can you confirm the bug is no present with 13.5.4 ??

[parirox]

First of all I appreciated for your respond, I checked your demo code by the latest version of next.js and update my projects part by part as you did, and finally I figure out the reason of my issue is I have no page beside the layout in my route so I don't add children in the layout.
If you remove the page inside the "jsonplaceholders" route you will see the loading doesn't work as expected.

[tresorama]

Your problem was that you haven't declared the layout file app/jsonplaceholders/layout.tsx or app/jsonplaceholders/page.tsx or that you haven't app/jsonplaceholders/@todos/page.tsx?

I don't have time now but I suggest you try also a "npm run build" and "npm run start" and check if all is working as expected because, in other similar discussions, some folks reported that sometimes the error is not present in "dev" but it's present in "production".

[parirox]

Yes, I have no page.tsx alongside my layout.tsx in the same route, and because of that, the loading doesn't work properly.
I don't have any issue in production, but when I set up PWA configs in my project, the parallel routes still don't work!
Parallel routes have been troublesome for me.

[Abukodonosor]

Problem in next15@rc!

[tresorama]

Hi, @Abukodonosor
Tried updating the codesanbox to next15rc and see no problem
codesanbox

[Abukodonosor]

Seems that loading.tsx component is needed in the root of the sub-route.

Thanks for feedback.

[tresorama]

<ErrorBoundary error={ErrorTSX}>
  <Suspense fallback={LoadingTSX}>
    <PageTSX/>
  </Suspense>
</ErrorBoundary>

Yes, If I remember well this is the tree 😎

[Abukodonosor]

Nop… not the component tree!

[tresorama]

All seems working as expected.
If someone found that this problem is still present, ping this discussion and I reopen it.

For now I close it.

[Abukodonosor]

The adding just the file based component!
( Dosenot work )

only when you put it inside boundery and suspense component together!

[tresorama]

The adding just the file based component! ( Dosenot work )

only when you put it inside boundery and suspense component together!

could you rephrase it ? english is not my first language and I'm not getting the point here...
what is not working ?

[Abukodonosor]

No problem.

the NextJS have the unique feature which enable us to use file-based router architecture.
Also there are some protected keywords which make this feature alive like:

layout, loading, error, not-found…

In this context, the loading component dosent work as expected, utill we nake propper workaround.

Hope it helps!

[tresorama]

What is not working as expected for the loading component?