How to use searchParamsCache.all in storybook with next appDirectory

[stevejcox]

I am using the storybook plugin: @storybook/nextjs. Within that I have my 'Page' component which takes searchParams as a prop which I am passing.
Wrapping a story with NuqsAdapter from nuqs/adapters/next allows me to run .parse on the cache, however in a sub-component when trying to call .all() I get the below error:

Error: [nuqs] Empty search params cache. Search params can't be accessed in Layouts.

-- Storybook:

import { NuqsAdapter } from "nuqs/adapters/next";
import { Page as PageComponent } from ".";
export default {
  title: "Pages/Product/Search",
  component: PageComponent,
  parameters: {
    layout: "fullscreen",
    nextjs: {
      appDirectory: true,
    },
  },
};

export const Page = () => {
  return (
    <NuqsAdapter>
      <PageComponent searchParams={Promise.resolve({ query: "search term" })} />
    </NuqsAdapter>
  );
};

-- Page:

import { searchParamsCache } from "@amino/utils.search/utils/params";
import { SearchForm } from "./components/SearchForm";
import { SearchResults } from "./components/SearchResults";

export const Page = async ({
  searchParams,
}: {
  searchParams: Promise<Record<string, string | string[] | undefined>>;
}) => {
  searchParamsCache.parse(await searchParams);

  return (
    <div className="min-h-screen bg-background">
      <main className="container mx-auto px-4 py-8">
        <SearchForm />
        <SearchResults />
      </main>
    </div>
  );
};

-- SearchResults:

import { searchParamsCache } from "@amino/utils.search/utils/params";
import { useTranslations } from "next-intl";
import { Suspense } from "react";
import { EmptyTable } from "./components/EmptyTable";
import { Results } from "./components/Results";
import { Skeleton } from "./components/Skeleton";

export const SearchResults = () => {
  const { query, model } = searchParamsCache.all();
  const t = useTranslations("pages.search.search_results");

  return (
    <>
      <h2 className="text-2xl font-semibold mb-4">{t("title")}</h2>
      {!query || !model ? (
        <EmptyTable message={t("empty_table")} />
      ) : (
        <Suspense fallback={<Skeleton />}>
          <Results />
        </Suspense>
      )}
    </>
  );
};

[franky47]

Thanks for the report, I managed to reproduce it, but the error goes away when using the sync version of the searchParams page prop (like it was in Next 14 and below).

When using the Promise-based API (for Next 15), I get another error from Storybook, even when using features.experimentalRSC: true in the Storybook config:

async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding `'use client'` to a module that was originally written for the server.

Edit: see #740.