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

{
	// '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

const intl = createIntl({
	locale,
	messages : messages[locale]
}, cache);

if (process.env.REACT_APP_DEBUG === '*' || process.env.NODE_ENV !== 'production')
{
	debug.enable('* -engine* -socket* -RIE* *WARN* *ERROR*');
}

const logger = new Logger();

let roomClient;

RoomClient.init({ store, intl });

const theme = createMuiTheme(window.config.theme);

import { Picker } from "emoji-mart"

import ClickWrapper from "../OutsideClickDetector"
import msg_zh from "i18n/zh.json"
import msg_en from "i18n/en.json"

const i18nMsg = {
	zh: msg_zh,
	en: msg_en
}
// const { intl } = new IntlProvider(
// 	{ locale: language, messages: messages },
// 	{}
// ).getChildContext()

const intl = createIntl({
	locale: navigator.language,
	messages: i18nMsg[navigator.language.substring(0, 2)]
})

const i18n = {
	search: intl.formatMessage({ id: "search" }),
	// clear: "清除", // Accessible label on "clear" button
	notfound: intl.formatMessage({ id: "not.found" }),
	// skintext: "Choose your default skin tone",
	categories: {
		search: intl.formatMessage({ id: "search.result" }),
		recent: intl.formatMessage({ id: "recently.used" }),
		people: intl.formatMessage({ id: "people" }),
		nature: intl.formatMessage({ id: "nature" }),
		foods: intl.formatMessage({ id: "food" }),
		activity: intl.formatMessage({ id: "activity" }),

const DEFAULT_TAB = "chat"

const DEFAULT_REAL_ROOM = {
	name: "大厅",
	id: "5",
	about: "this is lobby"
}

const i18nMsg = {
	zh: msg_zh,
	en: msg_en
}
const locale = window.navigator.userLanguage || window.navigator.language
const msg = i18nMsg[locale.substring(0, 2)]

const intl = createIntl({
	locale: locale,
	messages: msg
})

class App extends React.Component {
	constructor(props) {
		super(props)
		this.state = {
			account: null,
			// A few steps before mounting the app
			// 1. Check local/chrome storage to see if there's account data
			// , if so, mount the app.
			// 2. If no account in storage, check if there's credential data
			// in storage, if so, mount the app and auto login
			// 3. If neither account nor credential data is in storage,
			// mount the app and auto register

// 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(
    
      
        
        
      
    ,
    document.querySelector('#marsha-frontend-root'),

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: [],
  createTime: 1575123471750,
  deleteTime: 0,
  description: '林柏格',
  etag: '5d91672a-72e58"',
  favicon: 'https://breeze2.github.io/favicon.ico',
  generator: 'Hexo (http://hexo.io/)',
  language: '',
  link: 'https://breeze2.github.io/blog/',
  publishTime: 1569810157082,
  time: 1569810157082,

export function testWrapper(
  ToBeTested: ToBeTestedT,
  props: T,
  theme: ThemeAtom,
  locale: any
) {
  return render(
    
      
        
      
    
  )
}

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;
  }

*
 * 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;
    } else {
        return category === 'sandbox_endpoints' ? 'sandbox_failovers' : 'production_failovers';

render() {
    const { Component, pageProps, locale, messages } = this.props

    const intl = createIntl(
      {
        locale,
        messages,
      },
      cache
    )

    return (
      
        
      
    )
  }
}