Next js app directory + live provider + supabase

Good afternoon, I am using live provider + supabase + next js with app directory, With the following code

import { liveProvider } from '@refinedev/supabase';
import { supabaseBrowserClient } from '@utils/supabase/client';
<Refine
                            routerProvider={routerProvider}
                            authProvider={authProviderClient}
                            dataProvider={dataProvider}
                            liveProvider={liveProvider(supabaseBrowserClient)}
                            notificationProvider={useNotificationProvider}
                            resources={resources}
                            options={{
                                liveMode: 'auto',
                                syncWithLocation: true,
                                disableTelemetry: true,
                                mutationMode: 'optimistic',
                            }}>
                            {children}
                            <RefineKbar />
                        </Refine>

import { liveProvider } from '@refinedev/supabase';
import { supabaseBrowserClient } from '@utils/supabase/client';
<Refine
                            routerProvider={routerProvider}
                            authProvider={authProviderClient}
                            dataProvider={dataProvider}
                            liveProvider={liveProvider(supabaseBrowserClient)}
                            notificationProvider={useNotificationProvider}
                            resources={resources}
                            options={{
                                liveMode: 'auto',
                                syncWithLocation: true,
                                disableTelemetry: true,
                                mutationMode: 'optimistic',
                            }}>
                            {children}
                            <RefineKbar />
                        </Refine>

But I'm having the following problem

Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server". Or maybe you meant to call this function rather than return it.
  {subscribe: function subscribe, unsubscribe: ...}
              ^^^^^^^^^^^^^^^^^^

Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server". Or maybe you meant to call this function rather than return it.
  {subscribe: function subscribe, unsubscribe: ...}
              ^^^^^^^^^^^^^^^^^^

2 Replies

kapa.ai•6mo ago

Hi @Israel Lopez. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Good afternoon! It looks like you're encountering an issue related to the use of client and server components in Next.js when integrating liveProvider with Supabase in your Refine application. The error message you're seeing indicates that functions cannot be passed directly to client components unless they are explicitly marked with "use client" or "use server" directives. This is a common issue when dealing with Next.js' server and client component architecture. To resolve this, you need to ensure that your providers are correctly marked and separated for client and server usage. Here's a structured approach based on the information from the knowledge sources: 1. Separate Client and Server Providers: Create separate files for your client and server providers. This ensures that the functions are correctly marked and used in the appropriate context. 2. Mark Client Functions: Use the "use client" directive to mark functions that should be used on the client side. Here is an example structure and implementation: Directory Structure

src/
  providers/
    live-provider.client.tsx
    live-provider.server.tsx
    live-provider.tsx

src/
  providers/
    live-provider.client.tsx
    live-provider.server.tsx
    live-provider.tsx

live-provider.client.tsx

"use client";

import { liveProvider } from '@refinedev/supabase';
import { supabaseBrowserClient } from '@utils/supabase/client';

export const clientLiveProvider = liveProvider(supabaseBrowserClient);

"use client";

import { liveProvider } from '@refinedev/supabase';
import { supabaseBrowserClient } from '@utils/supabase/client';

export const clientLiveProvider = liveProvider(supabaseBrowserClient);

live-provider.server.tsx

"use server";

// Server-side implementation if needed

"use server";

// Server-side implementation if needed

live-provider.tsx

import { clientLiveProvider } from './live-provider.client';

export { clientLiveProvider };

import { clientLiveProvider } from './live-provider.client';

export { clientLiveProvider };

Usage in Your Component

import { clientLiveProvider } from '@providers/live-provider';
<Refine
    routerProvider={routerProvider}
    authProvider={authProviderClient}
    dataProvider={dataProvider}
    liveProvider={clientLiveProvider}
    notificationProvider={useNotificationProvider}
    resources={resources}
    options={{
        liveMode: 'auto',
        syncWithLocation: true,
        disableTelemetry: true,
        mutationMode: 'optimistic',
    }}>
    {children}
    <RefineKbar />
</Refine>

import { clientLiveProvider } from '@providers/live-provider';
<Refine
    routerProvider={routerProvider}
    authProvider={authProviderClient}
    dataProvider={dataProvider}
    liveProvider={clientLiveProvider}
    notificationProvider={useNotificationProvider}
    resources={resources}
    options={{
        liveMode: 'auto',
        syncWithLocation: true,
        disableTelemetry: true,
        mutationMode: 'optimistic',
    }}>
    {children}
    <RefineKbar />
</Refine>

By following this approach, you ensure that the liveProvider is correctly marked for client-side usage, which should resolve the error you're encountering. For more detailed information, you can refer to the Next.js integration documentation (https://refine.dev/docs/routing/integrations/next-js/#how-can-i-use-my-providers-in-the-both-server-and-client-side) provided by Refine. If you need further assistance, feel free to ask! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

<@755490362516045976> kapa.ai is still learning and improving, please let us know how it did by reacting below

Next js app directory + live provider + supabase

Did you find this page helpful?