not-found loses layout

[karlhorky]

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: 16.17.0
      npm: 8.15.0
      Yarn: 1.22.19
      pnpm: 7.1.0
    Relevant Packages:
      next: 13.4.10-canary.8
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 4.9.5
    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/sleepy-leavitt-q76g5v?file=%2Fapp%2Fnot-found.tsx

To Reproduce

1. Visit the CodeSandbox above
2. Navigate to a not-found page using the link or altering the URL
3. Layout is missing on the not-found page 💥

Kapture.2023-07-14.at.16.42.03.mp4

Describe the Bug

The not-found page no longer receives a layout

Expected Behavior

The not-found page receives a layout

Related issues / PRs

Possibly related to this issue and the PR addressing it:

1. Issue: [NEXT-1220] layout.js rendering twice in production #49115 by @joshwcomeau
2. PR: Ensure root layout only render once per request #52589 by @huozhi, reviewed by @shuding

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

_NEXT-1449

[karlhorky]

To contrast this with the previous behavior, I forked the sandbox above to downgrade to [email protected] (no other changes other than the version number), and header from the layout is working again:

CodeSandbox: https://codesandbox.io/p/sandbox/immutable-thunder-ym59x5?file=%2Fapp%2Fnot-found.tsx%3A1%2C1

Kapture.2023-07-14.at.16.48.53.mp4

[karlhorky]

Potential duplicate issue here:

• not-found page shows wrong layout and styles #52739

[karlhorky]

Thanks for #52790 @huozhi and @ijjk 🙌

However, I noticed that PR was reverted in #52977 before the release of [email protected].

Should we reopen this issue until it's landed permanently?

[LagSlug]

I'm not sure if this is related, but the not-found.js file is being resolved to a parent route when set under a dynamic route.

E.g.

In the following tree, under the route /bovines/[id], the not-found.tsx under the [id] directory will be called, but the returned node is not rendered - instead the nearest parent directory with a not-found.tsx is rendered.

.
└── app
    ├── bovines
    │   ├── [id]
    │   │   ├── not-found.tsx  (not rendered when throwing the NotFound error at this route)
    │   │   └── page.tsx
    │   ├── not-found.tsx (this is rendered instead)
    │   └── page.tsx
    ├── favicon.ico
    ├── globals.css
    ├── layout.tsx
    └── page.tsx

[karlhorky]

Thanks for the re-land in #52985 @huozhi @ijjk 🙌

I can confirm that it's working - the layout is back for not-found now:

CodeSandbox: https://codesandbox.io/p/sandbox/determined-bash-hp979v?file=%2Fpackage.json%3A10%2C24

Kapture.2023-07-24.at.11.13.29.mp4

[github-actions]

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