'I18nProvider' is not exported from '@lingui/react' in NextJS 14/15 #2067

Pakue95 · 2024-10-25T10:06:41Z

Pakue95
Oct 25, 2024

Hey, I'm trying to setup Lingui for a NextJS app, but I'm running into an issue with I18nProvider.
Here the error from a NextJS 14 instance:

Attempted import error: 'I18nProvider' is not exported from '@lingui/react' (imported as 'I18nProvider').

Import trace for requested module:
./src/app/layout.tsx
Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
 ⨯ Error: Unsupported Server Component type: undefined
    at stringify (<anonymous>)
    at stringify (<anonymous>)
digest: "1534271029"
 ⨯ Error: Unsupported Server Component type: undefined
    at stringify (<anonymous>)
    at stringify (<anonymous>)
digest: "1534271029"
 GET / 500 in 695ms
 ⚠ ./src/app/layout.tsx
Attempted import error: 'I18nProvider' is not exported from '@lingui/react' (imported as 'I18nProvider').

Import trace for requested module:
./src/app/layout.tsx

.babelrc

{
  "presets": ["next/babel"],
  "plugins": ["macros"]
}

lingui.config.ts

/** @type {import('@lingui/conf').LinguiConfig} */
module.exports = {
  locales: ["en", "de"],
  sourceLocale: "en",
  catalogs: [
    {
      path: "<rootDir>/locales/{locale}/messages",
      include: ["src"],
    },
  ],
  format: "po",
};

src/app/layout.tsx

import "./globals.css";
import { I18nProvider } from "@lingui/react";
import { messages } from "@/locales/en/messages";
import { i18n } from "@lingui/core";

i18n.load("en", messages);
i18n.activate("en");

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <I18nProvider i18n={i18n}>
        <body>{children}</body>
      </I18nProvider>
    </html>
  );
}

package versions:

      "dependencies": {
        "@lingui/react": "^4.13.0",
        "next": "14.2.16",
        "react": "^18.3.1",
        "react-dom": "^18",
        "react-intl": "^6.8.4"
      },
      "devDependencies": {
        "@babel/core": "^7.25.9",
        "@lingui/cli": "^4.13.0",
        "@lingui/macro": "^4.13.0",
        "@types/node": "^20",
        "@types/react": "^18",
        "@types/react-dom": "^18",
        "babel-plugin-macros": "^3.1.0",
        "eslint": "^8",
        "eslint-config-next": "14.2.16",
        "postcss": "^8",
        "tailwindcss": "^3.4.1",
        "typescript": "^5"
      }

Im getting similar issues in NextJS 15 with the SWC plugin.

I've probably missed something during setup, but can't pinpoint it. Thanks in advance!

timofei-iatsenko · 2024-10-25T12:04:20Z

timofei-iatsenko
Oct 25, 2024
Collaborator

RootLayout is a server component, in server components lingui import automatically resolves to the RSC specific modules which doesn't export a I18nProvider

Add `use client`; on the top of your layout.

PS

Setup to support RSC and Client components is tricky, consider with the examples we have in our repo as well as tutorial

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

'I18nProvider' is not exported from '@lingui/react' in NextJS 14/15 #2067

{{title}}

Replies: 1 comment

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

'I18nProvider' is not exported from '@lingui/react' in NextJS 14/15 #2067

Pakue95 Oct 25, 2024

Replies: 1 comment

timofei-iatsenko Oct 25, 2024 Collaborator

Pakue95
Oct 25, 2024

timofei-iatsenko
Oct 25, 2024
Collaborator