⨯ 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

[weiqiangChow]

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..

bro,
Are there any other solutions out there? this solution is ugliest...
when i need multiple languages, It will make my project very bloated

[adrai]

when i need multiple languages, It will make my project very bloated

why do you say it will make it very bloated? the folder structure does not increase when addiing more and more languages... it's always the same... only the translation json files needs to be there...

[weiqiangChow]

sorry. I misunderstood it.👀