search

clerk / javascript

Official JavaScript repository for Clerk authentication
https://clerk.com
MIT License
1.14k stars 258 forks source link

`<UserButton/>` hydration error #1201

Closed sarimabbas closed 1 year ago

sarimabbas commented 1 year ago

Package + Version

Dependencies + versions

Provide a json with the dependencies used in your project (copy paste from yarn.lock / package-lock.json) or a github project / template that reproduces the issue.

*Include the @clerk/ packages and their versions!**

Example:

  "dependencies": {
    "@clerk/nextjs": "^4.18.1",
    "next": "^13.4.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
  },
  "devDependencies": {
    "@types/node": "^20.2.0",
    "@types/react": "^18.2.6",
    "@types/react-dom": "^18.2.4",
    "typescript": "^5.0.4"
  }

Lockfile

  packages/web:
    dependencies:
      '@clerk/nextjs':
        specifier: ^4.18.1
        version: 4.18.1(next@13.4.2)(react-dom@18.2.0)(react@18.2.0)

  /@clerk/backend@0.19.1:
    resolution: {integrity: sha512-yY9UBWtC9xqD3cHcpGU4KFQouDrzKKtr5gibfoWneihvoziC08ARVccpNozR8pqz0xp3Zzk5Eg8Tdz+aq52J/A==}
    engines: {node: '>=14'}
    dependencies:
      '@clerk/types': 3.38.0
      '@peculiar/webcrypto': 1.4.1
      '@types/node': 16.18.6
      deepmerge: 4.2.2
      node-fetch-native: 1.0.1
      snakecase-keys: 5.4.4
      tslib: 2.4.1
    dev: false

  /@clerk/clerk-react@4.16.1(react@18.2.0):
    resolution: {integrity: sha512-6zZFSvriIS0nBEM+GXFwpn1bfV+B7U/NKjVWQO/rzKldAq0Vd1hgz9aFHAamaZNjoegdpZbGyT5gPIWogz2Mqw==}
    engines: {node: '>=14'}
    peerDependencies:
      react: '>=16'
    dependencies:
      '@clerk/shared': 0.16.1(react@18.2.0)
      '@clerk/types': 3.38.0
      react: 18.2.0
      swr: 1.3.0(react@18.2.0)
      tslib: 2.4.1
    dev: false

  /@clerk/clerk-sdk-node@4.9.1:
    resolution: {integrity: sha512-DazJga3mBmZwCTjUOGVQpVeBJGugU5uY2u3MDBEAx8ywX2B2zs3iPeehe4sx8DneRmztHDDR6RKbWIiYAtDFGw==}
    engines: {node: '>=14'}
    dependencies:
      '@clerk/backend': 0.19.1
      '@clerk/types': 3.38.0
      '@types/cookies': 0.7.7
      '@types/express': 4.17.14
      '@types/node-fetch': 2.6.2
      camelcase-keys: 6.2.2
      cookie: 0.5.0
      snakecase-keys: 3.2.1
      tslib: 2.4.1
    dev: false

  /@clerk/nextjs@4.18.1(next@13.4.2)(react-dom@18.2.0)(react@18.2.0):
    resolution: {integrity: sha512-Gsu8k2OmYKNDwZx0FX4yykID1zknhHoCnqgzV9rf59L8SE2bwfnDM0hx4Frw38osF6DkGMmj4cM3fd+9bskxew==}
    engines: {node: '>=14'}
    peerDependencies:
      next: '>=10'
      react: ^17.0.2 || ^18.0.0-0
      react-dom: ^17.0.2 || ^18.0.0-0
    dependencies:
      '@clerk/backend': 0.19.1
      '@clerk/clerk-react': 4.16.1(react@18.2.0)
      '@clerk/clerk-sdk-node': 4.9.1
      '@clerk/types': 3.38.0
      next: 13.4.2(react-dom@18.2.0)(react@18.2.0)
      path-to-regexp: 6.2.1
      react: 18.2.0
      react-dom: 18.2.0(react@18.2.0)
      tslib: 2.4.1
    dev: false

  /@clerk/shared@0.16.1(react@18.2.0):
    resolution: {integrity: sha512-x8DtpWb+GQkuByTMLzoWTc3gpz1+NUNCu7TDnWeFt+0PuZG5XaOb5pkC3wOfrxiMefUYr1Vi7lEYFxVmTdNMeg==}
    peerDependencies:
      react: '>=16'
    dependencies:
      glob-to-regexp: 0.4.1
      react: 18.2.0
    dev: false

  /@clerk/types@3.38.0:
    resolution: {integrity: sha512-2jOXfcfBwTesAneK4j+KcaFBX74wCBRtDA0AJ4bvMpTx7rhxN+Zdbd7kStOUbTsbAQXVw/RlGRuvGerV829jxA==}
    engines: {node: '>=14'}
    dependencies:
      csstype: 3.1.1
    dev: false

Browser/OS

Arc Version 0.103.1 (38943) incognito window with no extensions

Description

Running a simple Next.js app and followed the quickstart. I wrap my layout in ClerkProvider imported from @clerk/nextjs/app-beta.

When I import the UserButton into an RSC, I get the following error:

1 of 3 unhandled errors
Next.js is up to date

Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: Expected server HTML to contain a matching <div> in <div>.

See more info here: https://nextjs.org/docs/messages/react-hydration-error

Component Stack
div
Portal
../../node_modules/.pnpm/@clerk+clerk-react@4.16.1_react@18.2.0/node_modules/@clerk/clerk-react/dist/components/uiComponents.js (31:9)
eval
../../node_modules/.pnpm/@clerk+clerk-react@4.16.1_react@18.2.0/node_modules/@clerk/clerk-react/dist/components/uiComponents.js (66:11)
LoadedGuarantee
../../node_modules/.pnpm/@clerk+clerk-react@4.16.1_react@18.2.0/node_modules/@clerk/clerk-react/dist/contexts/StructureContext.js (22:28)
HOC
../../node_modules/.pnpm/@clerk+clerk-react@4.16.1_react@18.2.0/node_modules/@clerk/clerk-react/dist/components/withClerk.js (13:78)
div
body
ClerkContextProvider
../../node_modules/.pnpm/@clerk+clerk-react@4.16.1_react@18.2.0/node_modules/@clerk/clerk-react/dist/contexts/ClerkContextProvider.js (15:13)
ClerkProviderBase
../../node_modules/.pnpm/@clerk+clerk-react@4.16.1_react@18.2.0/node_modules/@clerk/clerk-react/dist/contexts/ClerkProvider.js (16:13)
Hoc
../../node_modules/.pnpm/@clerk+clerk-react@4.16.1_react@18.2.0/node_modules/@clerk/clerk-react/dist/utils/useMaxAllowedInstancesGuard.js (23:9)
ClerkProvider
../../node_modules/.pnpm/@clerk+nextjs@4.18.1_next@13.4.2_react-dom@18.2.0_react@18.2.0/node_modules/@clerk/nextjs/dist/app-beta/client/ClerkProvider.js (39:55)
html
Call Stack
throwOnHydrationMismatch
../../node_modules/.pnpm/next@13.4.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/react-dom-experimental/cjs/react-dom.development.js (6946:0)
tryToClaimNextHydratableInstance
../../node_modules/.pnpm/next@13.4.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/react-dom-experimental/cjs/react-dom.development.js (6985:0)
updateHostComponent$1
../../node_modules/.pnpm/next@13.4.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/react-dom-experimental/cjs/react-dom.development.js (16229:0)
beginWork$1
../../node_modules/.pnpm/next@13.4.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/react-dom-experimental/cjs/react-dom.development.js (18129:0)
HTMLUnknownElement.callCallback
../../node_modules/.pnpm/next@13.4.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/react-dom-experimental/cjs/react-dom.development.js (20199:0)
Object.invokeGuardedCallbackImpl
../../node_modules/.pnpm/next@13.4.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/react-dom-experimental/cjs/react-dom.development.js (20248:0)
invokeGuardedCallback
../../node_modules/.pnpm/next@13.4.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/react-dom-experimental/cjs/react-dom.development.js (20323:0)
beginWork
../../node_modules/.pnpm/next@13.4.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/react-dom-experimental/cjs/react-dom.development.js (26457:0)
performUnitOfWork
../../node_modules/.pnpm/next@13.4.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/react-dom-experimental/cjs/react-dom.development.js (25286:0)
workLoopConcurrent
../../node_modules/.pnpm/next@13.4.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/react-dom-experimental/cjs/react-dom.development.js (25272:0)
renderRootConcurrent
../../node_modules/.pnpm/next@13.4.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/react-dom-experimental/cjs/react-dom.development.js (25228:0)
performConcurrentWorkOnRoot
../../node_modules/.pnpm/next@13.4.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/react-dom-experimental/cjs/react-dom.development.js (24102:0)
workLoop
../../node_modules/.pnpm/next@13.4.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/scheduler-experimental/cjs/scheduler.development.js (261:0)
flushWork
../../node_modules/.pnpm/next@13.4.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/scheduler-experimental/cjs/scheduler.development.js (230:0)
MessagePort.performWorkUntilDeadline
../../node_modules/.pnpm/next@13.4.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/scheduler-experimental/cjs/scheduler.development.js (537:0)

Other things I've tried:

Would appreciate any help or guidance, thank you!

sarimabbas commented 1 year ago

Hmm it seems like the error occurs when both the UserButton and the rest of my page render. But goes away when one or the other is removed...strange. it might be an issue on my side. sorry for the false alarm!