I have a Next.js 14.2.12 app that works fine. I've been trying to add i18n to it so it can be viewed in both Valencian and Spanish, but it seems like I always end up getting the same error:
TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function at eval (webpack-internal:///(rsc)/./node_modules/react-i18next/dist/es/context.js:22:73) at (rsc)/./node_modules/react-i18next/dist/es/context.js (C:\Users\olamelas\WebstormProjects\nomenclator\.next\server\vendor-chunks\react-i18next.js:210:1) at __webpack_require__ (C:\Users\olamelas\WebstormProjects\nomenclator\.next\server\webpack-runtime.js:33:42) at eval (webpack-internal:///(rsc)/./node_modules/react-i18next/dist/es/Trans.js:8:69) at (rsc)/./node_modules/react-i18next/dist/es/Trans.js (C:\Users\olamelas\WebstormProjects\nomenclator\.next\server\vendor-chunks\react-i18next.js:180:1) at __webpack_require__ (C:\Users\olamelas\WebstormProjects\nomenclator\.next\server\webpack-runtime.js:33:42) at eval (webpack-internal:///(rsc)/./node_modules/react-i18next/dist/es/index.js:26:67) at (rsc)/./node_modules/react-i18next/dist/es/index.js (C:\Users\olamelas\WebstormProjects\nomenclator\.next\server\vendor-chunks\react-i18next.js:240:1) at __webpack_require__ (C:\Users\olamelas\WebstormProjects\nomenclator\.next\server\webpack-runtime.js:33:42) at eval (webpack-internal:///(rsc)/./src/app/[locale]/layout.tsx:15:71) { type: 'TypeError', page: '/favicon.ico' I've tried multiple ways and right now I have the following: File structure:
Layout.tsx (Outer-most file, server component):
import {headers} from 'next/headers'; import {Suspense} from 'react'; import Header from '@/components/header/HeaderComponent'; import Footer from '@/components/footer/FooterComponent'; import './globals.css'; import {Spinner} from "react-bootstrap"; import {I18nextProvider} from 'react-i18next'; import i18next from "@/../i18n"; export const metadata = { title: 'Some title', description: 'Some desc', }; export default function RootLayout({children}: { children: React.ReactNode }) { const requestHeaders = headers(); const locale = requestHeaders.get('accept-language')?.split(',')[0].slice(0, 2) || 'va'; i18next.changeLanguage(locale); return ( <I18nextProvider i18n={i18next}> <html lang={locale}> <body> <Suspense fallback={<Spinner/>}> <Header/> <div style={{width: '80%', minHeight: '60vh', margin: '0 auto'}}> {children} </div> <Footer/> </Suspense> </body> </html> </I18nextProvider> ); } middleware.js:
import {NextResponse} from "next/server"; export function middleware(request) { const locale = request.headers.get('accept-language')?.split(',')[0].slice(0, 2) || 'va'; const response = NextResponse.next(); response.cookies.set('NEXT_LOCALE', locale); return response; } export const config = { matcher: '/\\.(js|mjs|jsx|ts|tsx)$/' } next-i18next.config.mjs:
const config = { i18n: { defaultLocale: 'va', locales: ['es', 'va'], }, }; export default config; i18n.ts:
import i18next from 'i18next'; import { initReactI18next } from 'react-i18next'; import esTranslations from './public/locales/es/common.json'; import vaTranslations from './public/locales/va/common.json'; i18next .use(initReactI18next) .init({ lng: 'va', fallbackLng: 'va', resources: { es: { translation: esTranslations, }, ca: { translation: vaTranslations, }, }, interpolation: { escapeValue: false, }, }); export default i18next; next.config.mjs:
import nextI18nextConfig from "./next-i18next.config.mjs"; const nextConfig = { i18n: nextI18nextConfig.i18n, }; I'm completely lost at this point, any help is welcome export default nextConfig;
