Missing locale data for locale: “undefined”. Using default locale: “en” as fallback

[abdulkadhir]

I develop a react app which shows the error

[React Intl] Missing locale data for locale: "undefined". Using default locale: "en" as fallback.

[React Intl] Missing message: "nav.dashboard" for locale: "en" [React Intl] Cannot format message: "nav.dashboard", using message id as fallback

my app.js

import{ IntlProvider,addLocaleData } from "react-intl";
import messages from "./messages";
import{locale} from "./reducers/locale";
import {setLocale} from "./actions/locale"; 
class App extends React.Component {
render() {
    const { location, isAuthenticated, loaded, lang } = this.props;
    console.log(lang);   //undefined in console
    return (
         <IntlProvider key={ lang } locale={lang} messages={messages}>
        </IntlProvider>
  );
}

My displayPage.js

 import { FormattedMessage } from "react-intl";
 import messages from "../../messages";
 FormattedMessage id="nav.dashboard"
  default message="dash"/>

My locale.js/actions

    import{ LOCALE_SET } from "../types";

     export const localeSet = lang =>({
     type: LOCALE_SET,
    lang
   });
     export const setLocale = lang => dispatch =>{
     localStorage.myLang = lang;
    
    };

my locale.js/reducer

  import { LOCALE_SET } from "../types";
  default function locale(state={lang:"en"}, action={}){
  switch(action.type){
       case LOCALE_SET:
      return { lang: action.lang};
      default:
     return state;
 }

}     

[d11r]

@abdulkadhir you haven't done the necessary calls to add locales:
addLocaleData(en);