not-found.tsx within the route segment does not catch notFound()

[iDarkLightning]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: linux
      Arch: x64
      Version: #22 SMP Tue Jan 10 18:39:00 UTC 2023
    Binaries:
      Node: 18.14.2
      npm: 9.5.0
      Yarn: 1.22.19
      pnpm: N/A
    Relevant Packages:
      next: 13.4.13-canary.6
      eslint-config-next: 13.4.12
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.0.4
    Next.js Config:
      output: N/A

Which area(s) of Next.js are affected? (leave empty if unsure)

App Router

Link to the code that reproduces this issue or a replay of the bug

https://codesandbox.io/p/sandbox/kind-star-ztsjqt

To Reproduce

Create a not-found.tsx file inside a route segment. Call notFound() inside the corresponding page.tsx.

Describe the Bug

On versions greater than 13.4.9, a not-found.tsx does not catch the NEXT_NOT_FOUND error when thrown by the corresponding page.tsx and (most likely) pages further down the tree.

Expected Behavior

The expected behavior is that the closest not-found.tsx is rendered when NEXT_NOT_FOUND is thrown.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

_NEXT-1490

[darklight9811]

related #48763

[lucashfreitas]

experiencing the same problem after upgrading - had to downgrade it back to 13.4.9. Glad we had e2e tests to test 404 pages and it failed.

[balazsorban44]

See #48763 (comment)

More specifically

It's currently expected that /en/my-non-existent-page does not match/render app/[locale]/not-found.tsx.

So in your case, not-found.tsx needs to be higher up than the page you want to catch, ie. in this case at the root. Otherwise, the default 404 page will be rendered.

[darklight9811]

@balazsorban44 not any level of higher up, only root will catch it automatically.

[balazsorban44]

Actually, on second look, it seems like a different issue, will track and investigate further!

[MKraust]

As of 13.4.16 (same for 13.4.17) dynamic segment is catching it's NEXT_NOT_FOUND error, but shows pages/ 404 if no not-found.tsx is present in the dynamic segment.

Let's image this kind of app/ structure

app/
  not-found.tsx
  dynamic/
    layout.tsx
    [slug]/
      page.tsx

It seems like notFound() thrown inside app/dynamic/[slug]/page.tsx doesn't propagate to root app/not-found.tsx, instead it shows "pages" 404 with a app/dynamic/layout.tsx layout.
On the other hand, notFound() thrown inside non-existent segment, e.g. <host>/foo/bar, correctly shows a root app/not-found.tsx.

[huozhi]

@MKraust mind creating a new issue with a reproduction for that? Thanks 🙏

[MKraust]

@MKraust mind creating a new issue with a reproduction for that? Thanks 🙏

Already created. Sorry, I forgot to reference this issue :(

#54174

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.