search

vercel / next.js

The React Framework
https://nextjs.org
MIT License
127.51k stars 27.04k forks source link

Global styles not present in global-error.tsx page since next 14.2.8 #70553

Closed c-marchese closed 1 month ago

c-marchese commented 2 months ago

Link to the code that reproduces this issue

https://github.com/c-marchese/next-global-styles-in-global-error

To Reproduce

  1. Build the application (pnpm run build)
  2. Start the production server (pnpm run start)
  3. Visit the page

Current vs. Expected behavior

Following the steps from the previous section, I expected to see a red background but I observed a white background. This means global.css has not been applied to the global-error.tsx page.

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 22.6.0: Wed Jul  5 22:21:56 PDT 2023; root:xnu-8796.141.3~6/RELEASE_X86_64
  Available memory (MB): 16384
  Available CPU cores: 12
Binaries:
  Node: 20.9.0
  npm: 10.1.0
  Yarn: 1.22.19
  pnpm: 9.1.2
Relevant Packages:
  next: 15.0.0-canary.171 // Latest available version is detected (15.0.0-canary.171).
  eslint-config-next: N/A
  react: 19.0.0-rc-778e1ed2-20240926
  react-dom: 19.0.0-rc-778e1ed2-20240926
  typescript: 5.3.3
Next.js Config:
  output: N/A

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

Module Resolution

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

next start (local)

Additional context

Until Next 14.2.7, global-error.tsx shows a red background (see https://github.com/c-marchese/next-global-styles-in-global-error/tree/next14.2.7). Starting Next 14.2.8 – and in the latest canary – it doesn't.

I believe https://github.com/vercel/next.js/pull/69507 might be related to this issue.

samcx commented 2 months ago

@c-marchese Thank you for submitting an issue!

We can confirm that this is indeed an issue. We will be taking a look!

gaojude commented 1 month ago

@c-marchese

I fixed a slightly different issue / gave a different solution to your issue at https://github.com/vercel/next.js/pull/71914:

If you import a style file to the root layout, that style stopped being applied to global-error after >= 14.2.8. This may not be a bug, because it's reasonable to assume that if the root layout throws, the root layout styles don't get applied. So I think the current behaviour is good there.

However, my fix is that you'd need to import the styles to global-error (separately from root layout) for the global error styling to work. And, this is a net new feature.

github-actions[bot] commented 3 weeks ago

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.