Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

nested not-found.tsx page does not execute script defined in layout.tsx #64706

Open
stefanprobst opened this issue Apr 18, 2024 · 2 comments
Open

nested not-found.tsx page does not execute script defined in layout.tsx #64706

stefanprobst opened this issue Apr 18, 2024 · 2 comments
Labels
bug Issue was opened via the bug report template.

Comments

@stefanprobst
Copy link
Contributor

stefanprobst commented Apr 18, 2024 •
edited
Loading

Link to the code that reproduces this issue

https://github.com/stefanprobst/issue-next-not-found

To Reproduce

  1. git clone git@github.com:stefanprobst/issue-next-not-found.git && cd issue-next-not-found
  2. pnpm install && pnpm run dev
  3. open "http://localhost:3000/", which should show the root not-found page (app/not-found.tsx) with a dark background
  4. open "http://localhost:3000/en/invalid", which should show the nested not-found page (app/[locale]/not-found.tsx) with a light background, because the color-scheme script in app/[locale]/layout.tsx did not add the data attribute to the html element.

Current vs. Expected behavior

i expect the data attribute added to the <html> element by the script in app/[locale]/layout.tsx to not be lost when notFound() is called and the app/[locale]/not-found.tsx page is displayed.

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #18~22.04.1-Ubuntu SMP PREEMPT_DYNAMIC Wed Feb  7 11:40:03 UTC 2
  Available memory (MB): 32032
  Available CPU cores: 4
Binaries:
  Node: 20.12.2
  npm: 10.5.0
  Yarn: 1.22.19
  pnpm: 8.15.5
Relevant Packages:
  next: 14.3.0-canary.9 // Latest available version is detected (14.3.0-canary.9).
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.4.5
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Not sure

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

No response
@stefanprobst stefanprobst added the bug Issue was opened via the bug report template. label Apr 18, 2024
@gauravsekhri
Copy link

gauravsekhri commented Apr 20, 2024 •
edited
Loading

@stefanprobst Currently, nextjs do not provide access to params in not-found.tsx file. Other way is to create a separate client component that uses useParams() . This will return the value of locale param when called within not-found.tsx file. Let me know your thoughts.

@stefanprobst
Copy link
Contributor Author

Currently, nextjs do not provide access to params in not-found.tsx file.

i think the issue about not-found pages not receiving params is already tracked in another issue (although i can't find it at the moment).

this issue here is about the script in [locale]/layout.tsx not being executed when the following tree is rendered:

- layout.tsx
  - [locale]/layout.tsx
    - [locale]/not-found.tsx

[locale]/layout.tsx has a script which should add the data-color-scheme="dark" data attribute to <html>, however when the [locale]/not-found page is rendered, this data-attribute is not present on <html>.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Issue was opened via the bug report template.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@stefanprobst @gauravsekhri