3

I'm trying out a new way to integrate react-intl with NextJS. I've had a lot of problems with the example from the official repo. Basic translations work. But whenever I navigate to a page with a german translation I see this error:

Error: [@formatjs/intl Error MISSING_DATA] Missing locale data for locale: "de" in Intl.DateTimeFormat. Using default locale: "en" as fallback. See https://formatjs.io/docs/react-intl#runtime-requirements for more details 

    at new MissingDataError (/Users/**s/Code/hr-tool/hr-nextjs/node_modules/@formatjs/intl/src/error.js:45:23)
    at Object.createIntl (/Users/**/Code/hr-tool/hr-nextjs/node_modules/@formatjs/intl/src/create-intl.js:39:17)
    at Object.createIntl (/Users/**/Code/hr-tool/hr-nextjs/node_modules/react-intl/src/components/provider.js:59:27)
    at new IntlProvider (/Users/**/Code/hr-tool/hr-nextjs/node_modules/react-intl/src/components/provider.js:79:27)
    at processChild (/Users/**/Code/hr-tool/hr-nextjs/node_modules/react-dom/cjs/react-dom-server.node.development.js:3305:14)
    at resolve (/Users/**/Code/hr-tool/hr-nextjs/node_modules/react-dom/cjs/react-dom-server.node.development.js:3270:5)
    at ReactDOMServerRenderer.render (/Users/**/Code/hr-tool/hr-nextjs/node_modules/react-dom/cjs/react-dom-server.node.development.js:3753:22)
    at ReactDOMServerRenderer.read (/Users/**/Code/hr-tool/hr-nextjs/node_modules/react-dom/cjs/react-dom-server.node.development.js:3690:29)
    at renderToString (/Users/**/Code/hr-tool/hr-nextjs/node_modules/react-dom/cjs/react-dom-server.node.development.js:4298:27)
    at Object.renderPage (/Users/**/Code/hr-tool/hr-nextjs/node_modules/next/dist/next-server/server/render.js:52:851) {
  code: 'MISSING_DATA'

The solution is to add polyfill for the language data as described here. But I'm having problems installing the polyfill. The error message won't disappear. The next docs say to apply polyfills as a top-level import in the app.js file. This did not work. I also tried loading the polyfills asynchronously from getInitialProps (also did not work). I'm quite stuck. Maybe you can help.

Xen_mar
  • 8,330
  • 11
  • 51
  • 74
  • Maybe you could try [react-intl-universal](https://fe-tool.com/react-intl-universal) with next.js. Here is app example [integrating react-intl-universal with NextJS](https://github.com/alibaba/react-intl-universal/tree/master/packages/react-intl-universal/examples/browser-example) – cwtuan Oct 15 '22 at 12:51

0 Answers0