Error layout, global error and not found issues with internationalization

mertafor commented 11 months ago

Link to the code that reproduces this issue

https://github.com/mertafor/next-error-template-issue

To Reproduce

1 - Run pnpm build 2 - Build process fails by throwing following error :


> next-error-template-issue@0.1.0 build /Users/mertdaglaroglu/Documents/WebProjects/Reactive/comnet/next-error-template-issue
> next build

 ✓ Creating an optimized production build    
 ✓ Compiled successfully
 ✓ Linting and checking validity of types    
 ✓ Collecting page data    
   Generating static pages (0/5)  [    ]Error: Could not find the module "/Users/mertdaglaroglu/Documents/WebProjects/Reactive/comnet/next-error-template-issue/node_modules/.pnpm/next@13.5.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/error-boundary.js#" in the React Client Manifest. This is probably a bug in the React Server Components bundler.
    at ex (/Users/mertdaglaroglu/Documents/WebProjects/Reactive/comnet/next-error-template-issue/node_modules/.pnpm/next@13.5.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/next-server/app-page-experimental.runtime.prod.js:125:12678)
    at /Users/mertdaglaroglu/Documents/WebProjects/Reactive/comnet/next-error-template-issue/node_modules/.pnpm/next@13.5.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/next-server/app-page-experimental.runtime.prod.js:125:25344
    at Object.toJSON (/Users/mertdaglaroglu/Documents/WebProjects/Reactive/comnet/next-error-template-issue/node_modules/.pnpm/next@13.5.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/next-server/app-page-experimental.runtime.prod.js:125:26437)
    at stringify (<anonymous>)
    at ej (/Users/mertdaglaroglu/Documents/WebProjects/Reactive/comnet/next-error-template-issue/node_modules/.pnpm/next@13.5.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/next-server/app-page-experimental.runtime.prod.js:125:14133)
    at eI (/Users/mertdaglaroglu/Documents/WebProjects/Reactive/comnet/next-error-template-issue/node_modules/.pnpm/next@13.5.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/next-server/app-page-experimental.runtime.prod.js:125:14661)
    at Timeout._onTimeout (/Users/mertdaglaroglu/Documents/WebProjects/Reactive/comnet/next-error-template-issue/node_modules/.pnpm/next@13.5.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/next-server/app-page-experimental.runtime.prod.js:125:12095)
    at listOnTimeout (node:internal/timers:573:17)
    at process.processTimers (node:internal/timers:514:7)
Error: Could not find the module "/Users/mertdaglaroglu/Documents/WebProjects/Reactive/comnet/next-error-template-issue/node_modules/.pnpm/next@13.5.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/error-boundary.js#" in the React Client Manifest. This is probably a bug in the React Server Components bundler.
    at ex (/Users/mertdaglaroglu/Documents/WebProjects/Reactive/comnet/next-error-template-issue/node_modules/.pnpm/next@13.5.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/next-server/app-page-experimental.runtime.prod.js:125:12678)
    at /Users/mertdaglaroglu/Documents/WebProjects/Reactive/comnet/next-error-template-issue/node_modules/.pnpm/next@13.5.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/next-server/app-page-experimental.runtime.prod.js:125:25344
    at Object.toJSON (/Users/mertdaglaroglu/Documents/WebProjects/Reactive/comnet/next-error-template-issue/node_modules/.pnpm/next@13.5.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/next-server/app-page-experimental.runtime.prod.js:125:26437)
    at stringify (<anonymous>)
    at ej (/Users/mertdaglaroglu/Documents/WebProjects/Reactive/comnet/next-error-template-issue/node_modules/.pnpm/next@13.5.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/next-server/app-page-experimental.runtime.prod.js:125:14133)
    at eI (/Users/mertdaglaroglu/Documents/WebProjects/Reactive/comnet/next-error-template-issue/node_modules/.pnpm/next@13.5.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/next-server/app-page-experimental.runtime.prod.js:125:14661)
    at Timeout._onTimeout (/Users/mertdaglaroglu/Documents/WebProjects/Reactive/comnet/next-error-template-issue/node_modules/.pnpm/next@13.5.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/next-server/app-page-experimental.runtime.prod.js:125:12095)
    at listOnTimeout (node:internal/timers:573:17)
    at process.processTimers (node:internal/timers:514:7)
[Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.] {
  digest: '2779839787'
}

Error occurred prerendering page "/_not-found". Read more: https://nextjs.org/docs/messages/prerender-error
Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.
 ✓ Generating static pages (5/5) 

> Export encountered errors on following paths:
        /_not-found
 ELIFECYCLE  Command failed with exit code 1.

Current vs. Expected behavior

Unfortunately default pages like not-found and global-error pages are not well planned for internationalization, or at least I'd say it's not very well explained in docs. Either I'm doing something wrong or it's a buggy behavior on Next's side.

It's recommended to create not-found.tsx and global-error.tsx directly inside of app folder. However, inserting these files to app folder won't work because layout.tsx is insideapp/[lang]folder instead. As you can see in the minimal repo I provided, I've been able to fix this problem by creating a [...not-found] folder to catch any 404 error. Also global-error.tsx is being used to catch any other server error such as 500 and was used to work in app/[lang] folder safely. However recent releases don't allow this.

Now, when I use global-error.tsx inside of app folder, I get a build error. It's gone when I delete it. That said, right now I have no option to catch global errors and fallback page will be Next's default error page. Also I'm hoping an official solution for working with not-found.tsx page directly instead of [...not-found] workaround.

This issue started after v13.4.20-canary.12 :

Default app router not found (My guess is this one is causing the problem)

Verify canary release

[X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.0.0: Fri Sep 15 14:43:05 PDT 2023; root:xnu-10002.1.13~1/RELEASE_ARM64_T6020
Binaries:
  Node: 20.5.1
  npm: 9.8.0
  Yarn: 1.22.19
  pnpm: 8.7.6
Relevant Packages:
  next: 13.5.4-canary.8
  eslint-config-next: 13.5.3
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.2.2
Next.js Config:
  output: N/A

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

App Router

Additional context

It works fine with any version before v13.4.20-canary.12

_NEXT-1749

icastillejogomez commented 11 months ago

Same problem here and not production-grade-fix. I tried a lot of workarounds like importing a layout in other layout, reading pathnames but any of these are good options to a production environment. Next team any estimates for this bug?

icastillejogomez commented 10 months ago

Any news on this?

OtisTemler commented 10 months ago

Same issue here. Always happens when [lang] is in use.

tuannguyenminh2086 commented 10 months ago

Same issue here.

mertafor commented 10 months ago

It's really disappointing that there is no response from any maintainer or contributor after more than a month passed since I posted this issue. I tried almost anything comes to mind including creating not-found.tsx and error.tsx in /app/[lang] but no avail.

I believe the reason of this issue comes from this PR: https://github.com/vercel/next.js/pull/54199

It suggests adding a not-found.tsx under app folder which won't work if [lang] is being used.

Probably the worst, I see a white screen on browser if there is a breaking JS error: Application error: a client-side exception has occurred (see the browser console for more information).

Error boundary doesn't work at all. It's a bad practice for production.

FrancescoFontana commented 10 months ago

I had exactly the same error, I followed what this thread suggested, and after removing global-error.tsx it compiled without any issue.

I hope this will help you!

GabenGar commented 10 months ago

Deleting global-error.tsx also means not being able to apply root layout to the root error, which is uhhhh the whole point of app folder.

mertafor commented 10 months ago

The thing is actually global-error.tsx works just fine under /app/[lang] folder. I tried causing server errors manually and it catches all on dev environment. Only problem looks like the build error during static render checks and global-error.tsx is the only suspect here since deleting it fixes the build issues. That's said, although it's related to global-error.tsx, the main issue seems like build process.

github-actions[bot] commented 9 months 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.

vercel / next.js