When used in a Webpack Module Federation setup, this package cause a warning.

[patricklafrance]

🐛 Bug Report

When this package is installed + imported in a Webpack Module Federation setup, it cause a warning:

WARNING in shared module react
No required version specified and unable to automatically determine one. Unable to find required version for "react" in description file (i18next-mfe-issue\node_modules\.pnpm\react-i18next@13.5.0_i18next@23.7.6_react-dom@18.2.0_react@18.2.0\node_modules\react-i18next\dist\es\package.json). It need to be in dependencies, devDependencies or peerDependencies.  

The issue seems to be with nested package.json file. In my case with node_modules/react-i18next/dist/es/package.json.

If I locally add the react dependencies to the node_modules/react-i18next/dist/es/package.json file, the warning goes away:

{
    "type":"module",
    "version":"13.5.0",
    "devDependencies": {
        "react": "^16.14.0",
        "react-dom": "^16.14.0"
    },
    "peerDependencies": {
        "i18next": ">= 23.2.3",
        "react": ">= 16.8.0"
    },
    "peerDependenciesMeta": {
        "react-dom": {
          "optional": true
        },
        "react-native": {
          "optional": true
        }
    }
}

To Reproduce

Here's a repository with a reproduction: https://github.com/patricklafrance/i18next-mfe-issue

Expected behavior

No warning when react-i18next is used in a Module Federation setup.

Your Environment

• runtime version: i.e. node v14, deno, browser xy: Node v21.1.0
• i18next version: i.e. 19.5.3: "i18next": "23.7.6" and "react-i18next": "13.5.0"
• os: Mac, Windows, Linux: Windows 10 Enterprise
• any other relevant information

[adrai]

just a warning, so we'll keep it like that for now

[patricklafrance]

Well it’s only a warning but in my case it prints 24 times everytime I update my code using HMR 😅

I was wondering what’s the reason for this nested package.json file?

[adrai]

The reason is so it works for cjs and esm.

[patricklafrance]

Ok, thank you 🙏🏻

I figured this part out but I was wondering what is the reason for needing this nested package.json file to support cjs and esm because this is the first time I see it done that way.

For example, the React Aria Components package can achieve cjs and esm support without any nested package.json file. The only thing they do is specifying both module systems fields in the root package.json file:

  "main": "dist/main.js",
  "module": "dist/module.js",
  "types": "dist/types.d.ts",
  "source": "src/index.ts",
  "exports": {
    "types": "./dist/types.d.ts",
    "import": "./dist/import.mjs",
    "require": "./dist/main.js"
  },

[adrai]

fyi: this was one of the reasons, why we need that: #1589

[patricklafrance]

I see thank you 🙏🏻 I guess it works for React Aria component because they went for the .mjs solution instead of the nested package.json file.

[patricklafrance]

@ScriptedAlchemy there's more info in this issue about the MFE warning we've been talking about on Twitter (the warning because there's a nested package.json file in the react-i18next package).

[patricklafrance]

Adding requiredVersion: false to the shared react dependency mute the warning.