Error: It's currently unsupported to use "export *" in a client boundary. Please use named exports instead.

[cansin]

I have a React hook where there is also query getter defined for an axios call. E.g.

import { useQuery } from '@tanstack/react-query';
import { useCookies } from 'next-client-cookies';

export async function fetchTasks(cookies): Promise<object[]> {
  try {
    const tasks =
      (await axios.get({ headers: { cookies }, url: '/api/tasks'))?.data || [];
    return tasks;
  } catch (err) {
    console.error({ error: err }, 'Failed to fetch onboarding tasks');
    return [];
  }
}

export function useTasks() {
  const cookies = useCookies();
  return useQuery(() => fetchTasks(cookies));
}

The import { useCookies } from 'next-client-cookies'; import statement causes application to crush with:

Failed to compile
./node_modules/next-client-cookies/dist/index.mjs
Error: It's currently unsupported to use "export *" in a client boundary. Please use named exports instead.
This error occurred during the build process and can only be dismissed by fixing the error.

[cansin]

I.e. this file is used in two places:

import { useTasks } from './useTasks';

export default function SomeClientComponent() {
    const { data: tasks = [] } = useTasks();
    return <>{tasks}</>
}

and also from a server page like:

import {
  HydrationBoundary,
  QueryClient,
  dehydrate,
} from '@tanstack/react-query';
import { getCookies } from 'next-client-cookies/server';

import { fetchTasks } from './useTasks';

export default async function SomePage() {
  const cookies = getCookies();
  const queryClient = new QueryClient();

  await queryClient.prefetchQuery({
    queryKey: tasksQueryKey(),
    queryFn: () => fetchTasks({ cookies }),
  });

  return (
    // Neat! Serialization is now as easy as passing props.
    // HydrationBoundary is a Client Component, so hydration will happen there.
    <HydrationBoundary state={dehydrate(queryClient)}>
      <SomeContent />
    </HydrationBoundary>
  );
}

[cansin]

Ah, I guess I could separate the file in the interim 🤷

[cansin]

Nope, that did NOT help. 🤔

[moshest]

Can you share a repo with reproduction of this issue?

We have an example of a working project: https://github.com/moshest/next-client-cookies/tree/main/demo

It's probably related to something within your configuration and not this package.

[codecraf]

Just had the same error. You need to add "use client" at the top of the your client source.