Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server".

[brunoscopelliti]

"next": "^13.4.7"
"next-translate": "^2.4.2"
"next-translate-plugin": "^2.4.2"

node v18.15.0
macOS Ventura

I use next.js app folder. This is my configuration file:

// i18n.js
module.exports = {
  locales: ["it", "en"],
  defaultLocale: "it",
  loadLocaleFrom: (lang, namespace) =>
    import(`./locales/${lang}/${namespace}.json`).then((m) => m.default),
  localeDetection: false,
  pages: {
    "*": ["common"],
    "/": ["common"],
    "/account": ["account", "common", "errors"],
    // others
  },
};

I get the error:

Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server".

If I just remove the loadLocaleFrom function from the configuration, translation are loaded fine, but, when on backend code I use getT (for example to translate page title, or validation errors) the label key is rendered instead of the actual translation.

[brunoscopelliti]

Yes, I understand that - the fact that when you cross the server/client boundary you can share only serializable values; but i'm still confused.

I am not using loadLocaleFrom directly in my code; so if this is passed to a client component this is something happening out of my control at the moment. Also when I remove it (and this would fix the immediate issue with client components), then getT stops working, even if my translations file are in (what i suppose is) the default location (./locales/${lang}/${namespace}.json)... and this to me looks like a next-translate problem (sorry, if i'm wrong and i'm missing something).

I understand you're busy, and I appreciate the effort you put in this project. I can help you providing a better repro for the issue - please let me know if it's needed.

[aralroca]

I'm going to take a look

[aralroca]

The problem is that we are passing the config, but we don't remove the not serializable data. I'm going to fix it because we didn't need it.

[aralroca]

@brunoscopelliti try:

• Next-translate-plugin 2.4.3
• Next-translate 2.4.3

[brunoscopelliti]

@aralroca Thank you for the quick fix. I confirm that version 2.4.3 fixes the problem with loadLocaleFrom.

Anyway for some reason, titles are still not rendered properly in my application.

export const generateMetadata = async ({ searchParams }: PageParams) => {
  const t = await getT(searchParams.lang, ["common"]);
  return {
    title: t("common:page_title"),
  };
};

Will investigate further, and if turns out is a problem will open a different issue with proper repro. Thank you!