V5 & Monorepo: Error: Trans component was rendered without I18nProvider

[francois-pasquier]

Hey, I will try to provide a monorepo but for the moment, I'll just hope someone has an idea:

I started from the lingui next branch with the nextjs-swc example.

In the context of a monorepo, have a nextjs project in apps/web. Inside of it, I have this as a dependency: "@lingui/react": "5.0.0-next.4",

I also have a shared codebase in packages/app, inside of it I have basically all of my code, nextjs only loads the screens from packages/app.
In order for my <Trans /> calls to work, I had to declare "@lingui/react": "5.0.0-next.4", as a dependency as well.

The issue is, when you declare twice "@lingui/react": "5.0.0-next.4", in a monorepo you end up with this error:

Error: Trans component was rendered without I18nProvider.
Attempted to render message: is this going to be translated? id: 3FOdsM. Make sure this component is rendered inside a I18nProvider.

It honestly took me hours to troubleshoot this one.

For the moment I have the @lingui/react package declared in my root package.json. It's not a proper fix though.

[timofei-iatsenko]

The doing dependency right in the monorepo is a complicated topic. It's not related to lingui, but to the monorepos itself. The main rule is, if you import something in the package, you should have this stated in the dependency. If all of your code lies in the packages/app and have imports from @lingui/react you should state it in this package. If your apps/web also has any imports from @lingui/react it should also declare it in the direct dependencies, even if it's already declared in one of the subdependencies.
You can use import/no-extraneous-dependencies eslint rule to quickly spot this issues.

Regarding your issue, first you need to check that you don't have few versions of @lingui/react package installed, the yarn why or pnpm why command will help you with that.

Next, because I don't know how your monorepo works, it might be the case that you bundle your packages/app with @lingui/react inside, so you again end up with 2 copies of the package.

The same could be with a React package, make sure it with a yarn why command that you don't have two copies of package installed. Again, you have to have React be stated in the direct dependencies of the both packages/app and apps/web because they both uses react, and they should have exactly the same version.

Also pay attention to the peerDependencies issues when installing the packages, it usually shows when the peer dependencies are incorrectly meet which could potentially lead to this kind of issues.