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.

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

Server side Error.getInitialProps result cannot be hydrated into client error page #44844

Open
1 task done
tangye1234 opened this issue Jan 13, 2023 · 1 comment · May be fixed by #44845
Open
1 task done

Server side Error.getInitialProps result cannot be hydrated into client error page #44844

tangye1234 opened this issue Jan 13, 2023 · 1 comment · May be fixed by #44845
Labels
template: bug A user has filled out the bug report template. Issue needs triaging

Comments

@tangye1234
Copy link
Contributor

Verify canary release

  • 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 22.2.0: Fri Nov 11 02:03:51 PST 2022; root:xnu-8792.61.2~4/RELEASE_ARM64_T6000
Binaries:
Node: 19.4.0
npm: 9.2.0
Yarn: 1.22.19
pnpm: 7.24.3
Relevant packages:
next: 13.1.2
eslint-config-next: 13.1.1
react: 18.2.0
react-dom: 18.2.0

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

Data fetching (gS(S)P, getInitialProps)

Link to the code that reproduces this issue

https://github.com/tangye1234/next.js/tree/fix/render-error-on-page-error/test/integration/render-error-on-page-error/pages

To Reproduce

We need to reproduce it on production build, not dev phase.

next build
next start

browser the localhost, the error page cannot be hydrated properly.
the console prints a hydration error(react minify error)

Describe the Bug

The bug is firstly introduced by the bugfix: #21240
That bugfix is to solve the top module error in client render/hydration.

In fact, the renderErrorProps.props?.err can never be existed, which breaks the original intents.

Expected Behavior

  1. do not break the original design, that will use the error.getInitialProps server side result as the hydration props.
  2. if error comes from client not server side, it must call error.getInitialProps in the client side.

Which browser are you using? (if relevant)

Chrome 108

How are you deploying your application? (if relevant)

next start in nodejs

@tangye1234 tangye1234 added the template: bug A user has filled out the bug report template. Issue needs triaging label Jan 13, 2023
@vtassios
Copy link

You can't call getInitialProps in client components. Use getInitialProps inside /app at your page.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
template: bug A user has filled out the bug report template. Issue needs triaging
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants