79755567

Date: 2025-09-04 10:10:44
Score: 4
Natty:
Report link

That error is coming straight from Lingui’s core:

Lingui: Attempted to call a translation function without setting a locale.
Make sure to call `i18n.activate(locale)` before using Lingui functions.

In a Next.js App Router setup, this usually happens because your server-side prerender (or build step) renders a page where you call t, Trans, or i18n._(...) before you’ve initialized Lingui and activated a locale.

Here are the key points to fix it:
1. Initialize Lingui on the server

Lingui requires an i18n instance with an active locale. In an App Router project, that normally means you need to initialize it per request (server components can’t rely on a global instance).

Example lib/i18n.ts:

import { i18n } from "@lingui/core";
import { messages as enMessages } from "../locales/en/messages";
import { messages as deMessages } from "../locales/de/messages";

// preload your catalogs (or load dynamically if you prefer)
const catalogs: Record<string, any> = {
  en: enMessages,
  de: deMessages,
};

export function initI18n(locale: string) {
  if (!catalogs[locale]) {
    throw new Error(`Missing messages for locale "${locale}"`);
  }

  i18n.load(locale, catalogs[locale]);
  i18n.activate(locale);

  return i18n;
}

2. Call it inside a layout or server component

For App Router, you can initialize per request in your layout.tsx:

// app/[locale]/layout.tsx
import { initI18n } from "@/lib/i18n";
import { I18nProvider } from "@lingui/react";

export default function RootLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: { locale: string };
}) {
  const i18n = initI18n(params.locale);

  return (
    <html lang={params.locale}>
      <body>
        <I18nProvider i18n={i18n}>{children}</I18nProvider>
      </body>
    </html>
  );
}

That way, before any translation is rendered, you’ve already activated the locale.


3. Don’t call t outside components

If you try to use Lingui’s t macro or i18n._(...) at the module top-level (outside a function, e.g. directly in page.tsx), Next will evaluate it before your I18nProvider exists → you’ll get that exact error.

✅ Instead, always call t or render <Trans> inside React components.

4. Double-check static export (next export)

If you’re running next build && next export, Next will prerender all routes. If Lingui doesn’t have a default locale active at build time, you’ll hit the error.
Options:

Reasons:
  • Blacklisted phrase (1): ???
  • RegEx Blacklisted phrase (1.5): SOLVE THE PROBLEM???
  • Long answer (-1):
  • Has code block (-0.5):
  • Ends in question mark (2):
  • Low reputation (1):
Posted by: Marvin