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

app dir: useId mismatch on first request in next dev #48284

Open
1 task done
phryneas opened this issue Apr 12, 2023 · 2 comments
Open
1 task done

app dir: useId mismatch on first request in next dev #48284

phryneas opened this issue Apr 12, 2023 · 2 comments
Labels
area: app App directory (appDir: true) bug Issue was opened via the bug report template.

Comments

@phryneas
Copy link
Contributor

phryneas commented Apr 12, 2023

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.3.0: Mon Jan 30 20:38:37 PST 2023; root:xnu-8792.81.3~2/RELEASE_ARM64_T6000
    Binaries:
      Node: 19.6.1
      npm: 9.4.0
      Yarn: 3.5.0
      pnpm: 8.0.0
    Relevant packages:
      next: 13.3.1-canary.4
      eslint-config-next: 13.2.4
      react: 18.2.0
      react-dom: 18.2.0

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

App directory (appDir: true)

Link to the code that reproduces this issue

https://github.com/apollographql/apollo-client-nextjs/tree/main/examples/hack-the-supergraph-ssr

To Reproduce

  • Call useId in a client component in the app directory.
  • Start the app with next dev
  • On the first request, useId ids will mismatch between SSR and browser.

Describe the Bug

I see behavior where useId ids mismatch between SSR and browser only on the first request after a next dev start. (not in next build/next start)
Unfortunately, I am unable to reproduce the behaviour in a minimal application.
The application I am working on right now will be open-sourced in the next few weeks, but I can give you access before that if you ask me for it here. We have open sourced the Apollo Client Next.js App Router library now, and this bug happens in our example apps, which you can find here: https://github.com/apollographql/apollo-client-nextjs/tree/main/examples/hack-the-supergraph-ssr

Expected Behavior

In SSR and browser, useId generates the same ids at all times.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

next dev

@jeremistadler
Copy link

@phryneas Maybe this got fixed by #53216 ?

@phryneas
Copy link
Contributor Author

I mean that PR says it fixes a bug that was introduced last week, and this ticket is from April, so probably not? Admittedly, I haven't seen that hydration mismatch for a while, but it could be something I changed on our side.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area: app App directory (appDir: true) bug Issue was opened via the bug report template.
Projects
None yet
Development

No branches or pull requests

2 participants