4

What would you recommend for implementing i18n in a module federation micro-frontend next.js app?

At the moment (just starting) I got it working with react-intl by declaring the provider in the _app.tsx

  <IntlProvider locale={locale} defaultLocale={defaultLocale} messages={enMessages}>
    <SiteLayout>
      <Component {...pageProps}></Component>
    </SiteLayout>
  </IntlProvider>

And then when importing a component from another micro-frontend I am sending the intl object as param.

const XComponent = (await import('microApp2/XComponent')).default;
export default function ShellApp(): React.ReactElement {
  const intl = useIntl();
  return <XComponent intl={intl} />;
}

So that then in the micro-app component I can use it to format strings.

export default XComponent = (props: XComponentProps): React.ReactElement => {
  const { intl } = props;
  return (<div>{intl.formatMessage({ id: 'XComponent.Description' })}</div>);
}

The caveat of this approach is that I can only format using functions, I cannot make use of React DOM tags like:

<FormattedMessage id="" />

I didn't found much documentation so not sure this is a good approach. Those anybody knows or suggest any other solutions?

Thanks in advance!

gl0gl0
  • 255
  • 3
  • 7
  • Are you sharing the same react from the host with your remote? What kind of error do you get by using the i18n components? – Estevão Lucas Dec 22 '20 at 04:31
  • If I use `` component, it basically says there is no `IntlProvider` provided. Which means is not getting access from the main app wrapper :(. That's why I need to pass down the instance. – gl0gl0 Jan 06 '21 at 14:29

1 Answers1

1

You probably need to wrap each of your hosts with <IntlProvider> and get the value of your current language from a global source (like the URL or the state via a cookie etc).

Ruben Casas
  • 113
  • 3