originjs/vite-plugin-federation

Issue with i18next

lukasz-ciskowski opened this issue · 1 comments

lukasz-ciskowski commented

Versions

  • vite-plugin-federation: 1.3.5
  • vite: 5.4.0
  • i18next: 23.12.2

Reproduction

Hey, I have found a very interesting bug while working with this package and i18next. The code to reproduce can be found here under this github repository https://github.com/lukasz-ciskowski/i18next-issue

I've linked the github repo because this bug only happens for the built version of the package, when i18next is added to shared modules using this code

federation({
    name: "app",
    remotes: {},
    shared: ["i18next"],
}),

While opening the production version of the application (dev version works great), the app does not load and in the console I can see the following error
image

it appears that it happens when I am using specific I18n functions such as

i18next.on("languageChanged", () => {})

removing the following code fixes the issue, other I18next functionalities work as expected

Steps to reproduce

Go to repository https://github.com/lukasz-ciskowski/i18next-issue, download it on your machine, install the dependencies and run the build using npm run build then open the generated code - the application will not open and in the console you will see the error

What is Expected?

The shared i18next instance should work

What is actually happening?

I tried to find out the potential issue that this could happen and I found this:

When I logged out the I18next object using simple

console.log(I18next)

for the development mode I am getting this
image
but for the production code its this:
image

it seems like the shared package somehow breaks the object instance

and that would make things clear why the presented code with event listener does not work:
the events are handled in a class EventEmitter https://github.com/i18next/i18next/blob/master/src/EventEmitter.js
where the original i18next class is extending this class https://github.com/i18next/i18next/blob/master/src/i18next.js

mrvan2851 commented

host side : i18n.use(initReactI18next).init(options )
remote side: use i18next like i18n.addResourceBundle('en', 'YourNameSpace', en )
i work for me with single instance i18n for host and all remote.

  • 👍1