Next.js: react-intl in Head

Created on 6 Apr 2017 · 6Comments · Source: vercel/next.js

I am using react-intl as in project example. All works fine except for one small issue. If I try to set title in Head using FormattedMessage component it throws an error on SSR saying:

Could not find required intl object. needs to exist in the component ancestry.

<Head>
    <title>
      <FormattedMessage id="login.title" defaultMessage="login" />
    </title>
</Head>

However if I set the title using the formatMessage method things work fine:

const title = intl.formatMessage({
      id: 'login.title',
      defaultMessage: 'login',
    });
...
<Head>
    <title>
      {title}
    </title>
</Head>

Using <FormattedMessage> component elsewhere in render still works as it should though

example

Source

jamieholliday

👍3

Most helpful comment

I already have that set up and working following this example:
https://github.com/zeit/next.js/tree/master/examples/with-react-intl

Problem is <FormattedMessage> component is somehow causing error but only when used within <Head> whereas calling intl.formatMessage() directly is not

jamieholliday on 6 Apr 2017

👍4

All 6 comments

I think you need an intl ponyfill for node, such as https://www.npmjs.com/package/intl

albinekb on 6 Apr 2017

I already have that set up and working following this example:
https://github.com/zeit/next.js/tree/master/examples/with-react-intl

Problem is <FormattedMessage> component is somehow causing error but only when used within <Head> whereas calling intl.formatMessage() directly is not

jamieholliday on 6 Apr 2017

👍4

Same issue here. It's like the intlprovider is not "providing" the Head so you can't use the components:

[React Intl] Could not find required intl object. needs to exist in the component ancestry.

coluccini on 12 May 2017

is https://github.com/zeit/next.js/pull/2283 related @coluccini?

@ericf could you have a look since you made the example?

timneutkens on 2 Jul 2017

It shouldn't. This is happening with and without the polyfill.
I think this is more related to how next/head works than something related directly to Intl. Cause if you do this

<Head>
    <title>
      <FormattedMessage id="login.title" defaultMessage="login" />
    </title>
</Head>
<FormattedMessage id="login.title" defaultMessage="login" />

Only the first <FormattedMessage /> will throw the error

coluccini on 2 Jul 2017

Closing for inactivity

timneutkens on 12 Nov 2017

Was this page helpful?

0 / 5 - 0 ratings