Provide this package as an ES Module (ESM)

[greengiraffe]

EDIT: this does support ESM, as correctly stated here: #148 (comment)

Is your feature request related to a problem? Please describe.

I'd like to use this plugin in an ESM-based environment, which doesn't seem to be possible at the moment since the lib only exports CJS modules (unless I'm missing something). Since i18next itself is provided as CJS and ES, it's possible to write pure ESM-based configs in which this plugin cannot be used.

Describe the solution you'd like

If possible provide an ESM compatible export in addition to the existing CJS export.

Describe alternatives you've considered

I couldn't find any alternatives.

Additional context
–

[felixmosh]

Hi @greengiraffe, as far as I know, esm allows to import a cjs modules, so what is the issue that you are getting?

Which build env do you use? webpack or vite?
What version of this lib are you using?

[greengiraffe]

Hi @felixmosh thanks for your quick reply. You're absolutely right, ESM doesn't seem to be the issue, I was just stupid. My TS config was configured incorrectly, the moduleResolution was set to node instead of nodenext...

I cannot get the HMR to work properly though. I'm using Next.js with react-i18next instead of next-i18next since I'm exporting an SPA (no SSR/SSG). I'm basically using the config from the Next.js example to set up the HMRPlugin in the i18n config as well as adding it to the next.config.js.

This setup is possibly a bit obscure, so I don't expect to find a fix, but maybe it's obvious to you from the snippets provided below. I get the "[I18NextHMR] Client HMR has started" log but when changing language files, nothing is reloaded.

The versions I'm using are:

i18next-hmr: 3.0.2
next.js: 13.4.19
i18next: 23.5.1
i18next-http-backend: 2.2.2

./i18n.ts:

import i18n from 'i18next';
import LanguageDetector, {DetectorOptions} from 'i18next-browser-languagedetector';
import {HMRPlugin} from 'i18next-hmr/plugin';
import Backend, {HttpBackendOptions} from 'i18next-http-backend';
import {initReactI18next} from 'react-i18next';

const i18nInstance = i18n.use(Backend).use(LanguageDetector).use(initReactI18next);

if (process.env.NODE_ENV !== 'production') {
  i18nInstance.use(
    new HMRPlugin({
      webpack: {
        client: true,
      },
    }),
  );
}

i18n.init<HttpBackendOptions & DetectorOptions>({
  backend: {
    loadPath: '/static/locales/{{lng}}/{{ns}}.json',
  },
  react: {
    useSuspense: false,
  },
});

export {i18n};

// reexport functions & types from react-i18next
export {useTranslation, Trans, I18nextProvider} from 'react-i18next';
export type {TFunction} from 'i18next';

./next.config.js (snippet):

 webpack(config, {isServer}) {
    if (!isServer && config.mode === 'development') {
      const {I18NextHMRPlugin} = require('i18next-hmr/webpack');
      config.plugins.push(
        new I18NextHMRPlugin({
          localesDir: path.resolve(__dirname, 'public/static/locales'),
        }),
      );
    }
    return config;
}

[felixmosh]

Your code looks ok to me, it should work as it is only on the client.
When you change some json file, do you see any line change at the Next.js terminal output?
Do u see any console message in the browser? (except the one that tells you that "client HMR has started")

Can you make a small repo that reproduces this issue? (you can use one of the examples)

[greengiraffe]

No console output, neither in the browser nor the terminal.

I've created a sandbox that reproduces the issue here: https://codesandbox.io/p/sandbox/exciting-bessie-yf9hgt

[felixmosh]

The only piece that is not properly tested failed :]
Can you test v3.0.3 (make sure you've removed the .next folder before)

Thank you for reporting this issue 🙏🏼

[greengiraffe]

It works now using v3.0.3. Thanks for your quick response and the update! :)

As mentioned above, I had to change the values for "module" and "moduleResolution" in my tsconfig from esnext & node to NodeNext in order to import the HMRPlugin.

Also, a side note regarding an issue that I assume is something on Codesandbox' end: I've updated the sandbox that I've linked above – there it doesn't seem to work fully. The terminal and browser console log the updated translation file, but the page isn't hot-reloaded. Also, when editing and saving the pages/index.ts, the in-app-browser seems stuck in an infinite reloading loop.

[greengiraffe]

Integrating this now in the larger project instead of the toy example, I'm running into issues with the moduleResolution config set to "NodeNext" which ends up in multiple build errors unrelated to this package, since Next doesn't seem to support these settings out of the box (see e.g. vercel/next.js#37525, vercel/next.js#46078).

I've also tried to set "moduleResolution" to bundler and "module" to esnext as suggested here (vercel/next.js#46078 (comment)), this works with next dev but a next build leads to a build error that is potentially related to this package:

./node_modules/i18next-hmr/lib/webpack/plugin.js
Module not found: Can't resolve 'fs'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/i18next-hmr/lib/webpack/server-hmr.js
./node_modules/i18next-hmr/lib/plugin.js
./i18n.ts
./src/pages/404.tsx

I guess I'll need to report this over at Next.js though, just noted it down here for you and any others that may run into similar issues.

[felixmosh]

Actually you can solve it easily by wrapping HMRPlugin with process.env.NODE_ENV === 'developer' (with require/ import() inside it), this will be removed in prod build (therefore, no need for fs pollyfill)

[greengiraffe]

Great, that works. Thanks!

(I think you meant 'development' not 'developer')

if (process.env.NODE_ENV === 'development') {
  const {HMRPlugin} = await import('i18next-hmr/plugin');
  i18nInstance.use(
    new HMRPlugin({
      webpack: {
        client: true,
      },
    }),
  );
}