Usage example for ESM

[nick4fake]

When you use ESM you get this error:

Error: require() of ES Module /app/next-i18next.config.js from /app/....../next-i18next/dist/commonjs/serverSideTranslations.js not supported.

Relevant issue:
#1505

[nick4fake]

After changing import to:

import { serverSideTranslations } from "next-i18next/dist/esm/serverSideTranslations";

It shows another error:

SyntaxError: Cannot use import statement outside a module

[nick4fake]

Looks like this module doesn't use "exports" field, and "module" field is not supported officialy:
https://nodejs.org/api/packages.html#exports

"module" was a rejected proposal, AFAIK:
https://github.com/dherman/defense-of-dot-js/blob/master/proposal.md

[adrai]

I suspect also having an exports field would not fix the problem...
Next.js is somehow always trying to load the commonjs build...
vercel/next.js#39375

If you know of a solution that will work for all environments feel free to provide a PR... I was not able to solve this :-(

[nick4fake]

This also might be the reason:
https://github.com/i18next/next-i18next/blob/master/serverSideTranslations.js

When importing next-i18next/serverSideTranslations it always uses commonjs format

[adrai]

This also might be the reason: https://github.com/i18next/next-i18next/blob/master/serverSideTranslations.js

When importing next-i18next/serverSideTranslations it always uses commonjs format

no, I also tried to change that... the main problem is that Next.js wants the exports to be with .mjs ending... and that does not work with modules imported conditionally for browser order node.js side...

[nick4fake]

Ah, I seee. So far I've tried lots of options, including (putting here for reference):

Forcing mainFields (looks like it is already by default) ref:

config.resolve.mainFields = isServer
     ? ["module", "main"]
     : ["browser", "module", "main"];

Making package external (just to test):

config.externals = [...config.externals, "next-i18next"];

Directly including the file:

import { serverSideTranslations } from "next-i18next/dist/esm/serverSideTranslations.js";

Rewriting alias:

config.resolve.alias = {
      ...config.resolve.alias,
      "next-i18next$": "PATH_TO_MODULE/dist/esm/index.js",
};

So far I haven't found even a workaround, unfortunately.

Edit:
Oh, and I've also tried checking my config. tsconfig has moduleResolution: nodenext (tried changing), package.json has type: module

[nick4fake]

@adrai So does this basically mean that there is no way to use this package from ESM NextJS app? I am still trying to find other options/workarounds, but is there at least a hack to make it working?

[adrai]

yes, there's a way:

1. rename next.config.js to next.config.cjs
2. rename next-i18next.config.js to next-i18next.config.cjs
3. in next-i18next.config.cjs add process.env.I18NEXT_DEFAULT_CONFIG_PATH = './next-i18next.config.cjs'
4. if you have some imports in your code for the next-i18next.config or next.config adapt them to the .cjs variant

[nick4fake]

@adrai Chaning Sorry, forgot about the simplest option :)

Yeah, thanks. BTW, we don't need to change next-i18next.config.js if we simply don't include next-i18next.config.cjs there (duplicating i18n config).

[nick4fake]

Though now I have a different issue:

Error: Text content does not match server-rendered HTML.

Warning: Text content did not match. Server: "KEY_IN_TRANSLATION" Client: "REAL_TRANSLATION_VALUE"

See more info here: https://nextjs.org/docs/messages/react-hydration-error

Only occures on initial page load in dev mode, hmr fixes it (basically on any first change error goes away). Will looking into it, probably not related to this ticket.

Edit:
Nevermind: my stupid mistake (imported useTranslation from react-i18next).

[adrai]

https://github.com/i18next/next-i18next#usetranslation

import useTranslation from next-i18next, not from react-i18next

[nick4fake]

@adrai thanks, edited comment just in time :)

Thanks a lot for your help, though there should be some doc note about ESM. I'll create PR some day later

[Chriskuiper1]

I can't get my nextjs app working running on type Module.

Does anyone have an example?

I run into problems not being able to add the .cjs file to the _App main component or to my next.config file. I tried it all night long and it just doesnt work. Even having a next.config.cjs file in combination with next-i18next.config.cjs and a default path overwrite.

I18NEXT_DEFAULT_CONFIG_PATH=./next-i18next.config.cjs

I get the error: error - Error: Invalid locale returned from getStaticPaths for /[[...slug]], the locale nl is not specified in next.config.js

It just doesn't read my next.config location in the right way.

The config file's are in order and do have nl as local.

module.exports = {
i18n: {
locales: ['en', 'nl'],
defaultLocale: 'en',
// localePath: './public/locales',
// ns: ['common']
}}

please help me out!