Error: Invariant: cookies() expects to have requestAsyncStorage, none available.

[flott-live]

Preliminary Checks

• [X] I have reviewed the documentation: https://clerk.com/docs

• [X] I have searched for existing issues: https://github.com/clerk/javascript/issues

• [X] I have not already reached out to Clerk support via email or Discord (if you have, no need to open an issue here)

• [X] 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

https://github.com/clerk/javascript/pull/4396

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)/../../nodemodules/.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 : https://github.com/clerk/javascript/pull/4396 . Got fixed by reverting to ^6.0.0 just before this change got merged

Steps to reproduce:

1. 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>
    )
}

3. 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

[BRKalow]

Hi @flott-live, can you confirm if you're still experiencing this on the latest release? Thanks!