Next.js: NextJS with React-Intl

Created on 7 Jun 2017 · 8Comments · Source: vercel/next.js

Hi, When running next.js with react-intl in Safari in example https://github.com/zeit/next.js/tree/v3-beta/examples/with-react-intl i see error:

Development:

dev

Production:

production

Chrome and Firefox is ok.

example

Source

kimthangatm

Most helpful comment

Of course! 👉 https://github.com/zeit/next.js/pull/2283

coluccini on 16 Jun 2017

❤1 👍1

All 8 comments

👀 Keeping my on this because I'll introduce react-intl soon to my project.
So would be nice to see this discussion

lucasfeliciano on 7 Jun 2017

👍1

Which version of Safari are you using? I think until 10 they didn't had the Intl API, so you need to use a polyfill (I use polyfill.io)

coluccini on 9 Jun 2017

Thanks @coluccini . 👍

My Safari version: Version 9.1.2 (11601.7.7) and you right :)

@lucasfeliciano You can try this solution:

I try to change https://github.com/zeit/next.js/blob/v3-beta/examples/with-react-intl/components/Layout.js follow code and It work for me:

export default injectIntl(({intl, title, children}) => {
  const polyfillURL = 'https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.' + intl.locale;
  return (    
  <div>
    <Head>
      <meta name='viewport' content='width=device-width, initial-scale=1' />
      <title>{title || intl.formatMessage(messages.title)}</title>
      <script src={polyfillURL}></script>
    </Head>

    <header>
      <Nav />
    </header>

    {children}

  </div>
)
})

kimthangatm on 10 Jun 2017

:+1: You can add it in /pages/_document.js as well.

coluccini on 10 Jun 2017

If this works, could you please send a pull request for it, then everyone has the fix ❤️