Error: Invariant: cookies() expects to have requestAsyncStorage, none available. #4463
Closed as not planned
Description
Preliminary Checks
-
I have reviewed the documentation: https://clerk.com/docs
-
I have searched for existing issues: https://github.com/clerk/javascript/issues
-
I have not already reached out to Clerk support via email or Discord (if you have, no need to open an issue here)
-
This issue is not a question, general help request, or anything other than a bug report directly related to Clerk. Please ask questions in our Discord community: https://clerk.com/discord.
Reproduction
Publishable key
pk_test_ZGl2aW5lLXNlYWhvcnNlLTEwLmNsZXJrLmFjY291bnRzLmRldiQ
Description
Summary
Getting this error when signing out using the provided components.
errorMessage: Error: Invariant: cookies() expects to have requestAsyncStorage, none available.
file: webpack-internal:///(app-pages-browser)/../../node_modules/.pnpm/next@14.0.4-canary.36_@babel+core@7.26.0_react-dom@18.3.1_react@18.3.1/node_modules/next/dist/client/components/headers.js
methodName: cookies
Can be related to : #4396 . Got fixed by reverting to ^6.0.0 just before this change got merged
Steps to reproduce:
- Step 1
@/components/user-profile.tsx
"use client"
import { UserButton } from "@clerk/nextjs"
import { SignedIn } from "@clerk/nextjs"
export default function UserProfile() {
return (
<div className="flex flex-1 items-center justify-end space-x-4">
<SignedIn>
<div className="flex items-center rounded-full ring-4 ring-blue-400">
<UserButton signInUrl="/sign-in" userProfileUrl="/dashboard/account" />
</div>
</SignedIn>
</div>
)
}
- Step 2
app/page.tsx
import UserProfile from "@/components/user-profile"
export default async function NewProductPage({ params }: NewProductPageProps) {
const { user } = await getOrgMetadata()
if (!user) {
redirect("/sign-in")
}
return (<div >
<UserProfile />
</div>
)
Environment
System:
OS: macOS 14.0
CPU: (10) arm64 Apple M1 Pro
Memory: 50.77 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 21.5.0 - ~/.nvm/versions/node/v21.5.0/bin/node
Yarn: 1.22.22 - ~/.nvm/versions/node/v21.5.0/bin/yarn
npm: 10.2.4 - ~/.nvm/versions/node/v21.5.0/bin/npm
pnpm: 8.12.1 - ~/.nvm/versions/node/v21.5.0/bin/pnpm
bun: 1.1.18 - ~/.bun/bin/bun
Watchman: 2024.07.01.00 - /opt/homebrew/bin/watchman
Browsers:
Chrome: 130.0.6723.92
Safari: 17.0
npmPackages:
@aws-sdk/client-s3: ^3.481.0 => 3.685.0
@aws-sdk/s3-request-presigner: ^3.481.0 => 3.685.0
@clerk/localizations: ^3.4.1 => 3.4.1
@clerk/nextjs: ^6.1.0 => 6.1.0
@dicebear/collection: ^9.2.2 => 9.2.2
@dicebear/core: ^9.2.2 => 9.2.2
@faker-js/faker: ^8.3.1 => 8.4.1
@hookform/resolvers: ^3.3.2 => 3.9.1
@ianvs/prettier-plugin-sort-imports: ^4.1.1 => 4.3.1
@loglib/tracker: ^0.8.0 => 0.8.0
@mapbox/mapbox-gl-geocoder: ^5.0.2 => 5.0.3
@paralleldrive/cuid2: ^2.2.2 => 2.2.2
@radix-ui/react-accordion: ^1.1.2 => 1.2.1
@radix-ui/react-alert-dialog: ^1.0.5 => 1.1.2
@radix-ui/react-aspect-ratio: ^1.0.3 => 1.1.0
@radix-ui/react-avatar: ^1.0.4 => 1.1.1
@radix-ui/react-checkbox: ^1.0.4 => 1.1.2
@radix-ui/react-collapsible: ^1.0.3 => 1.1.1
@radix-ui/react-dialog: ^1.0.5 => 1.1.2
@radix-ui/react-dropdown-menu: ^2.0.6 => 2.1.2
@radix-ui/react-hover-card: ^1.0.7 => 1.1.2
@radix-ui/react-icons: ^1.3.0 => 1.3.1
@radix-ui/react-label: ^2.0.2 => 2.1.0
@radix-ui/react-menubar: ^1.0.4 => 1.1.2
@radix-ui/react-navigation-menu: ^1.1.4 => 1.2.1
@radix-ui/react-popover: ^1.0.7 => 1.1.2
@radix-ui/react-radio-group: ^1.1.3 => 1.2.1
@radix-ui/react-scroll-area: ^1.0.5 => 1.2.0
@radix-ui/react-select: ^2.0.0 => 2.1.2
@radix-ui/react-separator: ^1.0.3 => 1.1.0
@radix-ui/react-slider: ^1.1.2 => 1.2.1
@radix-ui/react-slot: ^1.0.2 => 1.1.0
@radix-ui/react-switch: ^1.0.3 => 1.1.1
@radix-ui/react-tabs: ^1.0.4 => 1.1.1
@radix-ui/react-toggle: ^1.0.3 => 1.1.0
@radix-ui/react-toggle-group: ^1.0.4 => 1.1.0
@radix-ui/react-tooltip: ^1.0.7 => 1.1.3
@react-email/components: ^0.0.12 => 0.0.12
@react-email/tailwind: 0.0.13 => 0.0.13
@remixicon/react: ^4.2.0 => 4.5.0
@t3-oss/env-nextjs: ^0.7.1 => 0.7.3
@tailwindcss/forms: ^0.5.7 => 0.5.9
@tailwindcss/typography: ^0.5.10 => 0.5.15
@tanstack/react-table: ^8.10.7 => 8.20.5
@tremor/react: ^3.14.1 => 3.18.3
@turf/turf: ^6.5.0 => 6.5.0
@types/eslint: ^8.44.8 => 8.56.12
@types/mapbox-gl: ^3.1.0 => 3.4.0
@types/node: ^20.10.2 => 20.17.5
@types/pg: ^8.10.9 => 8.11.10
@types/react: ^18.2.41 => 18.3.12
@types/react-dom: ^18.2.17 => 18.3.1
@types/react-pdf: ^7.0.0 => 7.0.0
@types/react-syntax-highlighter: ^15.5.10 => 15.5.13
@typescript-eslint/eslint-plugin: ^6.13.1 => 6.21.0
@typescript-eslint/parser: ^6.13.1 => 6.21.0
@uploadthing/react: ^6.0.2 => 6.8.0
autoprefixer: ^10.4.16 => 10.4.20
axios: ^1.6.3 => 1.7.7
class-variance-authority: ^0.7.0 => 0.7.0
clsx: ^2.0.0 => 2.1.1
cmdk: ^0.2.0 => 0.2.1
cookies-next: ^4.2.1 => 4.3.0
cuid: ^3.0.0 => 3.0.0
d3-scale: ^4.0.2 => 4.0.2
d3-scale-chromatic: ^3.1.0 => 3.1.0
date-fns: ^2.30.0 => 2.30.0
dotenv-cli: ^7.3.0 => 7.4.2
drizzle-kit: ^0.20.6 => 0.20.18
drizzle-orm: ^0.29.1 => 0.29.5
embla-carousel-react: 8.0.0-rc15 => 8.0.0-rc15
eslint: ^8.55.0 => 8.57.1
eslint-config-next: ^14.0.3 => 14.2.16
eslint-config-prettier: ^9.1.0 => 9.1.0
eslint-plugin-next: ^0.0.0 => 0.0.0
eslint-plugin-tailwindcss: ^3.13.0 => 3.17.5
eslint-plugin-unused-imports: ^4.1.4 => 4.1.4
expr-eval: ^2.0.2 => 2.0.2
framer-motion: ^11.0.8 => 11.11.11
i18next: ^23.10.1 => 23.16.4
jotai: ^2.6.4 => 2.10.1
lucide-react: ^0.343.0 => 0.343.0
mapbox-gl: ^3.1.2 => 3.7.0
mini-svg-data-uri: ^1.4.4 => 1.4.4
mongodb: ^6.5.0 => 6.10.0
mysql2: ^3.6.5 => 3.11.3
next: 14.0.4-canary.36 => 14.0.4-canary.36
next-themes: ^0.2.1 => 0.2.1
nuqs: ^1.17.1 => 1.20.0
openai: ^4.20.1 => 4.70.1
papaparse: ^5.4.1 => 5.4.1
pg: ^8.11.3 => 8.13.1
postcss: ^8.4.32 => 8.4.47
postgres: ^3.4.3 => 3.4.5
prettier: ^3.1.0 => 3.3.3
prettier-plugin-tailwindcss: ^0.5.7 => 0.5.14
qrcode.react: ^3.1.0 => 3.2.0
react: 18.3.1 => 18.3.1
react-cropper: ^2.3.3 => 2.3.3
react-day-picker: ^8.9.1 => 8.10.1
react-dom: 18.3.1 => 18.3.1
react-dropzone: ^14.2.3 => 14.3.1
react-email: ^1.10.0 => 1.10.1
react-hook-form: ^7.48.2 => 7.53.1
react-icons: ^5.0.1 => 5.3.0
react-intersection-observer: ^9.5.3 => 9.13.1
react-map-gl: ^7.1.7 => 7.1.7
react-markdown: ^9.0.1 => 9.0.1
react-medium-image-zoom: ^5.1.8 => 5.2.10
react-pdf: ^7.7.1 => 7.7.3
react-resizable-panels: ^2.0.3 => 2.1.6
react-syntax-highlighter: ^15.5.0 => 15.6.1
react-textarea-autosize: ^8.5.3 => 8.5.4
react-to-pdf: ^1.0.1 => 1.0.1
react-wordcloud: ^1.2.7 => 1.2.7
react-wrap-balancer: ^1.1.0 => 1.1.1
recharts: ^2.10.3 => 2.13.3
rehype-autolink-headings: ^7.1.0 => 7.1.0
rehype-code-titles: ^1.2.0 => 1.2.0
rehype-pretty-code: ^0.11.0 => 0.11.0
rehype-slug: ^6.0.0 => 6.0.0
remark-gfm: ^4.0.0 => 4.0.0
remark-math: ^6.0.0 => 6.0.0
sonner: ^1.2.4 => 1.5.0
tailwind-merge: ^2.1.0 => 2.5.4
tailwindcss: ^3.4.0 => 3.4.14
tailwindcss-animate: ^1.0.7 => 1.0.7
typescript: ^5.3.2 => 5.5.4
unist-util-visit: ^5.0.0 => 5.0.0
vaul: ^0.7.9 => 0.7.9
xlsx: ^0.18.5 => 0.18.5
zod: ^3.22.4 => 3.23.8