next-i18next: Not working with Next.js >= 10.2.x (probably because of webpack 5, dynamic imports are handled differently)

Describe the bug

Seems with the update to Next.js 10.2, Next.js is by default using webpack 5: https://nextjs.org/blog/next-10-2#webpack-5

Occurs in next-i18next version

next-i18next: v8.5.1 Next.js: >= v10.2.x

Steps to reproduce

Just update the next version in the simple example: https://github.com/isaachinman/next-i18next/blob/master/examples/simple/package.json#L12

Error

I have no idea on how this works behind the scene, it may be Next.js itself needs to do something. Currently an error like this is occurred: Error: Cannot find module '/Users/user/Projects/next-i18next/examples/simple/next-i18next.config.js' MODULE_NOT_FOUND (happens on dev)

Additional context

I’m not very familiar with Next.js and/or webpack 5, so if someone wants to invest a bit of time to investigate, this would be really good.

Currently next-i18next only works with Next.js <= v10.1.x if not passing the userConfig in explicitely

There is also an issue in the Next.js repo: https://github.com/vercel/next.js/issues/24729

➡️ Seems like this is breaking because webpack 5 is handling dynamic imports differently: https://github.com/vercel/next.js/issues/25077

https://nextjs.org/docs/advanced-features/dynamic-import

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 9
Comments: 35 (21 by maintainers)

Commits related to this issue

fix: only import default config if no userConfig is passed (#1302) * only import default config if no userConfig is passed #1202 * test: only import default config if no userConfig is passed — committed to i18next/next-i18next by adrai 3 years ago

Most upvoted comments

I have good news: Based on @myWsq’s discussion and example I’ve created a simple next-i18next example that works with SSG: https://github.com/adrai/next-i18next-static-example You see here, it is not using the in-built next.js i18n feature. with a new language-detector module: https://github.com/adrai/next-language-detector/tree/main/example

adrai on Dec 7, 2021

fyi: still no luck with next.js v11.1.0 😢

adrai on Aug 12, 2021

For those not following #1384, this has been linked to a bug in NextJs: https://github.com/vercel/next.js/issues/24700

isaachinman on Sep 30, 2021

No worries! As long as users are implementing getStaticProps, they can simply run next build && next start, and content will be served fully statically. No need to use next export.

isaachinman on Aug 13, 2021

Thanks @adrai. I believe this is simply a NextJs bug at this point – passing your config into serverSideTranslations should work as a workaround until they fix it upstream.

ModuleNotFoundError: Module not found: Error: Can't resolve 'fs' in '/vercel/path0/node_modules/next-i18next/dist/commonjs'

I get this webpack error upon production build on Vercel unfortunately. I can’t downgrade to webpack4 because my project is already complex & uses a lot of webpack5 features. The funny thing is everything works well in development environment

cvrlnolan on Aug 9, 2021

I found a temporary fix until https://github.com/vercel/next.js/issues/24700 gets addressed in Next.js Iteration 22 or 23, 24, 25, etc…

in next-i18next: serverSideTranslations.ts line 42, check for !userConfig before importing from DEFAULT_CONFIG_PATH
in userland: for every serverSideTranslations() call, import nextI18NextConfig from '../next-i18next.config.js' and pass it as last argument to serverSideTranslations => await serverSideTranslations(locale, ['common', 'footer'], nextI18NextConfig)

I just tested this on Next.js v11.0.1 and it seems to work.

serverSideTranslations.ts

i.e. second-page.js

adrai on Jun 27, 2021

I am not sure what exactly the root cause is, but I do know the Vercel team had to do a lot of webpack trickery to get this v5 release stable enough. I assume they are manipulating the fs in an unexpected way.

this may be related: https://github.com/vercel/next.js/issues/24700

adrai on May 16, 2021