i18next doesn't work in next 15

Answered

Scaly-naped Pigeon posted this in #help-forum

Scaly-naped PigeonOP

2024-12-11T20:00:51.950Z

does anyone know why i18next with react-i18next doesn't work in next 15 and works with next 14 , am i missing something ?

Answered by Scaly-naped Pigeon

I fixed the issue its because I have to add this layout and wrap it inside layout.tsx

'use client';
import { I18nextProvider } from 'react-i18next';
import i18n from '@/utils/i18n';
import React from 'react';
export default function I18nProvider({ children }: { children : React.ReactNode}) {
  return <I18nextProvider i18n={i18n}>{children}</I18nextProvider>;
}

View full answer

7 Replies

West African Lion

2024-12-11T20:20:09.046Z

Can you share your project structure?

https://nextjs.org/docs/pages/building-your-application/routing/internationalization

@West African Lion https://nextjs.org/docs/pages/building-your-application/routing/internationalization

Scaly-naped PigeonOP

2024-12-11T20:25:22.264Z

all I did is this

import i18n from "i18next";
import { initReactI18next } from "react-i18next";

const resources = {
  en: {
    translation: {
      react: "Welcome to React and react-i18next"
    }
  },
  fr: {
    translation: {
      react: "Bienvenue à React et react-i18next"
    }
  }
};

i18n.use(initReactI18next)
  .init({
    resources,
    fallbackLng: 'en',
    lng: "en",

    interpolation: {
      escapeValue: false
    }
});
export default i18n;

then imported i18n to layout.tsx and then used the useTranslation inside page.tsx app router

West African Lion

2024-12-11T20:30:38.525Z

what can you see in the log?

@West African Lion what can you see in the log?

Scaly-naped PigeonOP

2024-12-11T20:40:36.228Z

all I see is this in the logs

Uncaught TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function

import { initReactI18next } from './initReactI18next.js';
5 | export { getDefaults, setDefaults, getI18n, setI18n, initReactI18next };

6 | export const I18nContext = createContext();

| ^
7 | export class ReportNamespaces {
8 | constructor() {
9 | this.usedNamespaces = {};

Scaly-naped PigeonOP

2024-12-11T21:28:44.918Z

I fixed the issue its because I have to add this layout and wrap it inside layout.tsx

'use client';
import { I18nextProvider } from 'react-i18next';
import i18n from '@/utils/i18n';
import React from 'react';
export default function I18nProvider({ children }: { children : React.ReactNode}) {
  return <I18nextProvider i18n={i18n}>{children}</I18nextProvider>;
}

Answer