Functions cannot be passed directly to Client Components

Unanswered

Da_v_id posted this in #help-forum

2024-07-17T00:29:24.733Z

export default async function RootLayout({
  children,
  params: { locale },
}: Readonly<{
  children: React.ReactNode;
  params: {
    locale: Locale;
  };
}>) {
  const translatedData = await getTranslatedData(locale);
  return (
    <html lang={locale} suppressHydrationWarning>
      <body
        className={cn(
          "min-h-screen bg-background font-sans antialiased max-w-2xl mx-auto py-12 sm:py-24 px-6",
          fontSans.variable
        )}
      >
        <TranslatedDataProvider translatedData={translatedData}>
          <ThemeProvider attribute="class" defaultTheme="light">
            <TooltipProvider delayDuration={0}>
              {children}
              <Navbar />
            </TooltipProvider>
          </ThemeProvider>
        </TranslatedDataProvider>
      </body>
    </html>
  );
}

how come as soon as I add await to getTranslatedData which is flagged with "use server" I immediately get this error:

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.
  {$$typeof: ..., render: function Home}

if I remove it, it works but what is the point of having a promise in the context provider?

74 Replies

James4u

2024-07-17T00:31:50.215Z

@Da_v_id you can't pass function directly to the client component. what you can pass to the client component server actions

the correct way to do this is to make a client component with all of your providers

Da_v_idOP

2024-07-17T00:32:38.671Z

I understand but where in this code I am passing a function to a client component? If I wait for the promise i should just pass the resulting string, right?

the problem arise when i put the 'await' in front of my promise

James4u

2024-07-17T00:33:39.083Z

can you show me the TranslatedDataProvider component?

Da_v_idOP

2024-07-17T00:34:15.568Z

here:

"use client"

import { getTranslatedData } from "@/data/resume"
import React from "react"

type TranslatedData = ReturnType<typeof getTranslatedData>

const TranslatedDataContext = React.createContext<TranslatedData | null>(null)

export default function TranslatedDataProvider({
  translatedData,
  children,
}: {
  translatedData: TranslatedData
  children: React.ReactNode
}) {
  return (
    <TranslatedDataContext.Provider value={translatedData}>
      {children}
    </TranslatedDataContext.Provider>
  )
}

export function useTranslatedData() {
  const translatedData = React.useContext(TranslatedDataContext)
  if (translatedData === null) {
    throw new Error('useTranslatedData hook must be used within TranslatedDataProvider')
  }

  return translatedData
}

I also tried to play around with TranslatedData type and put Awaited<ReturnType<typeof getTranslatedData> when I wait for the data in the layout

James4u

2024-07-17T00:37:02.478Z

import { getTranslatedData } from "@/data/resume"

what's this line for?

Da_v_idOP

2024-07-17T00:37:41.845Z

oh it's just used for the type

James4u

2024-07-17T00:39:07.221Z

wait @Da_v_id do you have "use server" in getTranslateData function?

show me that function

import { getTranslatedData } from "@/data/resume"
show me this file

Da_v_idOP

2024-07-17T00:41:11.798Z

i do have and it looks like this:

"use server";
import { getDictionary } from '@/lib/getDictionaries';
export const getTranslatedData = async (locale: Locale) => {
  const intl = await getDictionary(locale);

  const getDescription = (descriptions: MultiLanguage) => {
    return descriptions[locale] || descriptions['en'];
  };
  return ({...})

and getDictionary:

import 'server-only'
import { i18n, Locale } from '@/lib/i18-config'

const dictionaries = {
  it: () => import('@/dictionaries/it.json').then((module) => module.default),
  en: () => import('@/dictionaries/en.json').then((module) => module.default),
}

export const getDictionary = async (locale: Locale) => dictionaries[i18n.locales.includes(locale) ? locale : i18n.defaultLocale]()

James4u

2024-07-17T00:41:40.543Z

okay so @Da_v_id "use server" is used wrongly

"use server" is like a door to the server from the client side

it should be used for server actions

Da_v_idOP

2024-07-17T00:42:21.660Z

right, I have actually played around with that too, and if i remove it the result will be the same

James4u

2024-07-17T00:43:16.912Z

okay anyway, we should remove "use server"

and you still get the same error?

Da_v_idOP

2024-07-17T00:43:23.453Z

done, thank you!

@James4u and you still get the same error?

Da_v_idOP

2024-07-17T00:43:27.494Z

yes :/

James4u

2024-07-17T00:46:27.241Z

can you create a separate typescript file for the interfacecs and types for the function and import types from there?

@Da_v_id

@James4u can you create a separate typescript file for the interfacecs and types for the function and import types from there?

Da_v_idOP

2024-07-17T00:46:57.687Z

Sure, which interfaces are you referring to?

@Da_v_id here: ts "use client" import { getTranslatedData } from "@/data/resume" import React from "react" type TranslatedData = ReturnType<typeof getTranslatedData> const TranslatedDataContext = React.createContext<TranslatedData | null>(null) export default function TranslatedDataProvider({ translatedData, children, }: { translatedData: TranslatedData children: React.ReactNode }) { return ( <TranslatedDataContext.Provider value={translatedData}> {children} </TranslatedDataContext.Provider> ) } export function useTranslatedData() { const translatedData = React.useContext(TranslatedDataContext) if (translatedData === null) { throw new Error('useTranslatedData hook must be used within TranslatedDataProvider') } return translatedData }

James4u

2024-07-17T00:47:31.164Z

you are basically importing getTranslatedDatain the client component for only types

so define types in a separated typescript file and try to import it

@James4u you are basically importing `getTranslatedData`in the client component for only types

Da_v_idOP

2024-07-17T00:49:29.735Z

I can replace it with any for now

James4u

2024-07-17T00:49:43.484Z

try it then, remove the import line

Da_v_idOP

2024-07-17T00:50:03.149Z

like this:

"use client"

import type { getTranslatedData } from "@/data/resume"
import React from "react"

type TranslatedData = ReturnType<typeof getTranslatedData>

const TranslatedDataContext = React.createContext<TranslatedData | null>(null)

export default function TranslatedDataProvider({
  translatedData,
  children,
}: {
  translatedData: TranslatedData
  children: React.ReactNode
}) {
  return (
    <TranslatedDataContext.Provider value={translatedData}>
      {children}
    </TranslatedDataContext.Provider>
  )
}

export function useTranslatedData() {
  const translatedData = React.useContext(TranslatedDataContext)
  if (translatedData === null) {
    throw new Error('useTranslatedData hook must be used within TranslatedDataProvider')
  }

  return translatedData
}

I get the same error :/

James4u

2024-07-17T00:50:16.609Z

nope,
import type { getTranslatedData } from "@/data/resume"

Da_v_idOP

2024-07-17T00:50:20.785Z

pardon

James4u

2024-07-17T00:50:29.796Z

remove this line, don't try to import functions into client component

Da_v_idOP

2024-07-17T00:51:16.968Z

'use client'

import React from "react"

type TranslatedData = Awaited<ReturnType< any>>

const TranslatedDataContext = React.createContext<TranslatedData | null>(null)

export default function TranslatedDataProvider({
  translatedData,
  children,
}: {
  translatedData: TranslatedData
  children: React.ReactNode
}) {
  return (
    <TranslatedDataContext.Provider value={translatedData}>
      {children}
    </TranslatedDataContext.Provider>
  )
}

export function useTranslatedData() {
  const translatedData = React.useContext(TranslatedDataContext)
  if (translatedData === null) {
    throw new Error('useTranslatedData hook must be used within TranslatedDataProvider')
  }

  return translatedData
}

James4u

2024-07-17T00:51:48.239Z

"use client"


import React from "react"

const TranslatedDataContext = React.createContext<any | null>(null)

export default function TranslatedDataProvider({
  translatedData,
  children,
}: {
  translatedData: any
  children: React.ReactNode
}) {
  return (
    <TranslatedDataContext.Provider value={translatedData}>
      {children}
    </TranslatedDataContext.Provider>
  )
}

export function useTranslatedData() {
  const translatedData = React.useContext(TranslatedDataContext)
  if (translatedData === null) {
    throw new Error('useTranslatedData hook must be used within TranslatedDataProvider')
  }

  return translatedData
}

Da_v_idOP

2024-07-17T00:51:54.145Z

should be Awaited?

James4u

2024-07-17T00:52:05.524Z

nope, it's a client component, sync function

Da_v_idOP

2024-07-17T00:52:09.568Z

I used your snippet but still this error

it's so weird

James4u

2024-07-17T00:52:42.571Z

show me the file as a screenshot?

Da_v_idOP

2024-07-17T00:52:57.418Z

export async function generateStaticParams() {
  return [{ lang: 'en-US' }, { lang: 'it' }]
}

export default async function RootLayout({
  children,
  params: { locale },
}: Readonly<{
  children: React.ReactNode;
  params: {
    locale: Locale;
  };
}>) {
  const translatedData = await getTranslatedData(locale);
  return (
    <html lang={locale} suppressHydrationWarning>
      <body
        className={cn(
          "min-h-screen bg-background font-sans antialiased max-w-2xl mx-auto py-12 sm:py-24 px-6",
          fontSans.variable
        )}
      >
        <TranslatedDataProvider translatedData={translatedData}>
          <ThemeProvider attribute="class" defaultTheme="light">
            <TooltipProvider delayDuration={0}>
              {children}
              <Navbar />
            </TooltipProvider>
          </ThemeProvider>
        </TranslatedDataProvider>
      </body>
    </html>
  );
}

which file?

James4u

2024-07-17T00:53:10.673Z

TranslatedDataProvider.tsx

Da_v_idOP

2024-07-17T00:53:16.351Z

James4u

2024-07-17T00:54:35.369Z

do we get the same error if we comment out <TranslatedDataProvider> layer in the layout.tsx?

export async function generateStaticParams() {
  return [{ lang: 'en-US' }, { lang: 'it' }]
}

export default async function RootLayout({
  children,
  params: { locale },
}: Readonly<{
  children: React.ReactNode;
  params: {
    locale: Locale;
  };
}>) {
  //const translatedData = await getTranslatedData(locale);
  return (
    <html lang={locale} suppressHydrationWarning>
      <body
        className={cn(
          "min-h-screen bg-background font-sans antialiased max-w-2xl mx-auto py-12 sm:py-24 px-6",
          fontSans.variable
        )}
      >
        <ThemeProvider attribute="class" defaultTheme="light">
          <TooltipProvider delayDuration={0}>
            {children}
            <Navbar />
          </TooltipProvider>
        </ThemeProvider>
      </body>
    </html>
  );
}

Da_v_idOP

2024-07-17T00:55:07.205Z

no it works!

but i can't access the data in client components from the context :/

James4u

2024-07-17T00:55:57.657Z

yeah, ofc just wanted to check if it's really due to that provider

Da_v_idOP

2024-07-17T00:56:07.748Z

oh then I guess it is

James4u

2024-07-17T00:56:35.548Z