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

[SABEYGUNA]

Getting above error in new app created with latest Next version.

⨯ 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 (D:\Sankalpa\Personal\blog\NextJs-Translation\nextjs_translation\.next\server\vendor-chunks\react-i18next.js:60:1) at __webpack_require__ (D:\Sankalpa\Personal\blog\NextJs-Translation\nextjs_translation\.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 (D:\Sankalpa\Personal\blog\NextJs-Translation\nextjs_translation\.next\server\vendor-chunks\react-i18next.js:30:1) at __webpack_require__ (D:\Sankalpa\Personal\blog\NextJs-Translation\nextjs_translation\.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 (D:\Sankalpa\Personal\blog\NextJs-Translation\nextjs_translation\.next\server\vendor-chunks\react-i18next.js:90:1) at __webpack_require__ (D:\Sankalpa\Personal\blog\NextJs-Translation\nextjs_translation\.next\server\webpack-runtime.js:33:42) at eval (webpack-internal:///(rsc)/./node_modules/next-i18next/dist/esm/index.js:11:71) at (rsc)/./node_modules/next-i18next/dist/esm/index.js (D:\Sankalpa\Personal\blog\NextJs-Translation\nextjs_translation\.next\server\vendor-chunks\next-i18next.js:60:1) at __webpack_require__ (D:\Sankalpa\Personal\blog\NextJs-Translation\nextjs_translation\.next\server\webpack-runtime.js:33:42) at eval (webpack-internal:///(rsc)/./app/page.tsx:7:70) at (rsc)/./app/page.tsx (D:\Sankalpa\Personal\blog\NextJs-Translation\nextjs_translation\.next\server\app\page.js:195:1) at Function.__webpack_require__ (D:\Sankalpa\Personal\blog\NextJs-Translation\nextjs_translation\.next\server\webpack-runtime.js:33:42) at async e9 (D:\Sankalpa\Personal\blog\NextJs-Translation\nextjs_translation\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:396476) at async tb (D:\Sankalpa\Personal\blog\NextJs-Translation\nextjs_translation\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:400134) at async tS (D:\Sankalpa\Personal\blog\NextJs-Translation\nextjs_translation\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:400695) at async tS (D:\Sankalpa\Personal\blog\NextJs-Translation\nextjs_translation\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:400826) at async tR (D:\Sankalpa\Personal\blog\NextJs-Translation\nextjs_translation\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:36:2130) at async D:\Sankalpa\Personal\blog\NextJs-Translation\nextjs_translation\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:36:2722 { digest: '3222498571', page: '/'

Package.json
{ "name": "nextjs_translation", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "i18next": "^23.14.0", "next": "14.2.7", "next-i18next": "^15.3.1", "react": "^18", "react-dom": "^18", "react-i18next": "^15.0.1" }, "devDependencies": { "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "eslint": "^8", "eslint-config-next": "14.2.7", "postcss": "^8", "tailwindcss": "^3.4.1", "typescript": "^5" } }

[adrai]

sorry, not able to reproduce...
just updated the Next.js dependencies in this example and it still works: https://github.com/i18next/next-i18next/tree/master/examples/simple

[skysteve]

if you're using app router this package doesn't work per readme:

If you're using Next.js 13/14 with app directory, there is no need for next-i18next, you can directly use i18next and react-i18next, like described in this blog post.

[krystiankulik]

That's right, the library doesn't work with the app router. I think it should be written down in the README in a more direct way because "there is no need" is bit confusing.

[georgehgfonseca]

if you're using app router this package doesn't work per readme:

If you're using Next.js 13/14 with app directory, there is no need for next-i18next, you can directly use i18next and react-i18next, like described in this blog post.

This worked but the solution is quite ugly and verbose when compared to i18n in standalone React..

[FiammaMuscari]

i have the same issue