How to use the react-intl.createIntlCache function in react-intl

// import messagesEnglish from './translations/en';
import messagesNorwegian from './translations/nb';
import messagesGerman from './translations/de';
import messagesHungarian from './translations/hu';
import messagesPolish from './translations/pl';
import messagesDanish from './translations/dk';
import messagesFrench from './translations/fr';
import messagesGreek from './translations/el';
import messagesRomanian from './translations/ro';
import messagesPortuguese from './translations/pt';

import './index.css';

const App = ReactLazyPreload(() => import(/* webpackChunkName: "app" */ './components/App'));

const cache = createIntlCache();

const messages =
{
	// 'en' : messagesEnglish,
	'nb' : messagesNorwegian,
	'de' : messagesGerman,
	'hu' : messagesHungarian,
	'pl' : messagesPolish,
	'dk' : messagesDanish,
	'fr' : messagesFrench,
	'el' : messagesGreek,
	'ro' : messagesRomanian,
        'pt' : messagesPortuguese
};

const locale = navigator.language.split(/[-_]/)[0]; // language without region code

await import('@formatjs/intl-relativetimeformat');
      // Get `react-intl`/`formatjs` lang specific parameters and data
      await import(
        `@formatjs/intl-relativetimeformat/locale-data/${localeCode}`
      );
    }
  } catch (e) {
    report(e);
  }

  let translatedMessages = null;
  try {
    translatedMessages = await import(`./translations/${locale}.json`);
  } catch (e) {}

  const cache = createIntlCache();
  intl = createIntl(
    {
      locale: localeCode,
      messages: translatedMessages,
    },
    cache,
  );

  // Render our actual component tree
  ReactDOM.render(
    
      
        
        
      
    ,

import App from 'next/app'
import React from 'react'
import { createIntl, createIntlCache, RawIntlProvider } from 'react-intl'

// This is optional but highly recommended
// since it prevents memory leak
const cache = createIntlCache()

export default class MyApp extends App {
  static async getInitialProps({ Component, ctx }) {
    let pageProps = {}

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx)
    }

    // Get the `locale` and `messages` from the request object on the server.
    // In the browser, use the same values that the server serialized.
    const { req } = ctx
    const { locale, messages } = req || window.__NEXT_DATA__.props

    return { pageProps, locale, messages }
  }

import { createIntl, createIntlCache } from 'react-intl'
import { messages } from '../locales'
import { IArticle, IFeed } from '../schemas'

const cache = createIntlCache()

export const domNode = document.createElement('div')
document.body.appendChild(domNode)

export const intlProviderProps = {
  defaultLocale: 'en-US',
  locale: 'en-US',
  messages: messages['en-US'],
}
export const intl = createIntl(intlProviderProps, cache)

export const feed: IFeed = {
  _id: 'https://breeze2.github.io/blog/atom.xml',
  _rev: '2-0af48b1987682ae7d7128fecbd0feb4a',
  author: 'Linyifeng',
  categories: [],

async init() {
    const locale = localStorageService.get(LOCAL_USER_PREFERENCE_LOCALE_KEY, getLanguage());
    const messages = (localesMap.get(locale) || localesMap.get('en-US'))!.messages;
    const cache = createIntlCache();
    const intl = createIntl(
      {
        locale,
        messages: messages,
      },
      cache
    );
    this.intl = intl;
  }

* you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an 'AS IS' BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import cloneDeep from 'lodash.clonedeep';
import { createIntl, createIntlCache } from 'react-intl';

const cache = createIntlCache();

const intl = createIntl({
    locale: 'en-US',
    messages: {},
}, cache);

/**
 * Utility method to get the endpoint property name based on the given endpoint type and category.
 *
 * @param {string} type The type of the endpoint (load_balance/ failover)
 * @param {string} category The endpoint category (production/ sandbox)
 * @return {string} The property name of the endpoints.
 */
function getEndpointTypeProperty(type, category) {
    if (type !== 'failover') {
        return category;