ssr react-intl format message doesn't work properly

Question

import React from 'react'
import { Helmet } from 'react-helmet-async'
import { injectIntl } from 'react-intl'
import PropTypes from 'prop-types'

const Seo = props => {
  const { intl } = props

  const title = intl.messages['pages.Home.messages.title']
  const description = intl.messages['pages.Home.messages.description']

  return (
    <>
      {/* <Helmet
        title={title}
        meta={[
          { name: 'description', content: description },
          { property: 'og:title', name: 'title', content: title },
          {
            property: 'og:description',
            name: 'description',
            content: description
          }
        ]}
      /> */}

      <Helmet>
        <title>{title}</title>

        <meta property="og:title" content={title} />
        <meta property="og:description" content={description} />
      </Helmet>
    </>
  )
}

Seo.propTypes = {
  intl: PropTypes.instanceOf(Object)
}

export default injectIntl(Seo)

Here how I parse SEO variables on the ssr . When I wrap text with intl.formatMessage, it shows only default values on the ssr , but I can't get values for other languages

Here how it into configured on ssr


    const pathname = ctx.originalUrl

    const locale = getLanguageByPathname({ pathname }) || DEFAULT_LANGUAGE

    const helmetContext = {}

    const sheets = new ServerStyleSheets()

    const html = ReactDOMServer.renderToString(
      <StaticRouter location={ctx.request.url} context={routeContext}>
        <Provider store={createStore({})}>
          <HelmetProvider context={helmetContext}>
            <IntlProvider
              locale={locale}
              messages={getMessages(locale)}
              onError={() => {}}
            >
              {sheets.collect(
                <MuiThemeProvider theme={theme()}>
                  <Application dynamicData={data} server />
                </MuiThemeProvider>
              )}
            </IntlProvider>
          </HelmetProvider>
        </Provider>
      </StaticRouter>
    )

Locale and message initial selection works properly , when user navigate to page /th/pathname , I see the language and select th translation , but text which I see in view-cource:mysite is default values , the only solution I found to get variables from intl context

  const title = intl.messages['pages.Home.messages.title']
  const description = intl.messages['pages.Home.messages.description']

is it the only way , or it is possible to make it differently ?

function loadLocaleData(locale) {
  switch (locale) {
    case HI:
      return import('locales/hi.json')
    case ID:
      return import('locales/id.json')
    case MY:
      return import('locales/my.json')
    case TH:
      return import('locales/th.json')
    case VI:
      return import('locales/vi.json')
    case ZH_CN:
      return import('locales/zh-cn.json')
    case ZH_TW:
      return import('locales/zh-tw.json')
    default:
      return import('locales/en.json')
  }
}

 const messages = await loadLocaleData(locale)

I was also tried to get language async and pass it to IntlProvider then

<IntlProvider messages={messages.default} ..

but still formatMessage() return default value, but not value from json file

ssr react-intl format message doesn't work properly

0 Answers0