@lingui/babel-preset-react is probably missing in babel config

Describe the bug

• <Trans> elements don’t show in dev
• Console prints: @lingui/babel-preset-react is probably missing in babel config, but you are using <Trans> component in a way which requires it. Either don't use children in <Trans> component or configure babel to load @lingui/babel-preset-react preset. See tutorial for more info: https://l.lingui.io/tutorial-i18n-react
• The link in the console message doesn’t point to a tutorial
• Production crashes

To Reproduce

1. Fork https://github.com/facebook/create-react-app
2. Make app
3. Follow https://lingui.js.org/tutorials/react.html#installing-linguijs
   • Install cli locally so managing its version across developers is much easier
   • find that babel-plugin-macros is already enabled in the config: https://github.com/WoWAnalyzer/create-react-app/blob/wowanalyzer-2.0/packages/babel-preset-react-app/create.js#L109

Expected behavior

• I’d expect it to work without @lingui/babel-preset-react since it’s not mentioned in the docs
• The link to point to a tutorial

Additional context Add any other context about the problem here.

• jsLingui version lingui --version 2.7.0
• Babel version npm list babel-core babel-core@7.0.0-bridge.0
• Your Babel config (e.g. .babelrc) or framework you use (Create React App, Meteor, etc.) https://github.com/WoWAnalyzer/create-react-app/blob/wowanalyzer-2.0/packages/babel-preset-react-app/create.js (CRA 2.0 with minor changes)

[tricoder42]

That means there should be all these functions/components exported from a package with prebaked i18n instance and you should be able to change its configuration instead of making a new one.

It used to be like that in early version of LinguiJS but I was afraid that having a global/default i18n instance would lead to errors.

Still, no way to get rid of two imports (runtime vs macro), because macros must be imported from specific module name. At least we could get i18n.t syntax back:

import i18n, { Trans } from `@lingui/macro`

<a title={i18n.t`Link title`}><Trans>Content</Trans></a>

this would be transformed to:

import i18n, { Trans } from `@lingui/react`

<a title={i18n._('Link title' )}><Trans id="Content" /></a>

This is trivial example to keep things simple. We could rename runtime/macro exports to make it clear what is what…

If you want to use a custom instance of i18n, then you need to create your own ./i18n.macro.js file as described above.

[MartijnHols]

Oh my god, it’s so simple! 😊 Thanks, I’ll try it tonight but it makes total sense.