React-i18next: Cannot read property 'translator' of undefined, In Reactjs.

[adilsaeed31]

Hi

I am facing this issue from last day only Trans is working but t() is not working it's giving me this error.

I am using express server only to send all routes to reactjs through * and also creating some cookies, that's it, rest everything is reactjs.

I am facing this eror,

Im using i18nextprovider and translate hoc.

Need help here.

Thanks
Adil

[jamuhl]

Hi Adil, could you please paste some code. Guessing Trans works and t not:

a) your component is not wrapped into translate hoc
b) you do not use t from this.props

[adilsaeed31]

Hi,

I am using translate hoc and also using t form this.props but t not working Trans working
here is below code sample is App.jsx file

`import { I18nextProvider } from 'react-i18next';
import i18n from 'i18n';

const Routes = (

)`

Below is i18n.jsx file
`import i18n from 'i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import English from "i18n/Langs/English";
import Arabic from "i18n/Langs/Arabic";

i18n
.use(LanguageDetector)
.init({
// we init with resources
debug: true,
detection: {
lookupCookie: 'awok_LANGUAGE'
},
languages: ['en', 'ar'],
resources: {
en: {
translations: English
},
ar: {
translations: Arabic
}
},
fallbackLng: 'en',

// have a common namespace used around the full app
ns: ['translations'],
defaultNS: 'translations',

keySeparator: false, // we use content as keys

interpolation: {
  escapeValue: false, // not needed for react!!
  formatSeparator: ','
},

react: {
  wait: true
}

});

export default i18n;
below is some component file
import React from "react";
import appConfig from "appConfig";
import { translate, Trans } from "react-i18next";

class TopLinks extends React.PureComponent {
constructor(props) {
super(props);
}

renderTopLinks() {
  if (this.props.items) {
    return this.props.items.map((item, key) => (
      <div key={key} className="top-header-left">
          <p><a href={`${appConfig.BASE_URL}${item.link}`} target="_blank"><i
              className={`${item.icon} mr-5`}/><Trans>{item.label}</Trans></a></p>
      </div>
    ))
  }
}

render() {
    return (
        <div className="col-md-6">
          {this.renderTopLinks()}
            <div
              className="top-header-left download-app"
              onMouseEnter={this.displayAppBox}
              onMouseLeave={this.hideAppBox}
              >
                <div className="dropdown dropdown-user">
                    <p><i
                        className="fa fa-mobile fa-lg mr-5"/>
                        <Trans>download_app</Trans>
                      </p>
                    <ul className="dropdown-menu dropdown-menu-left download_app">
                        <li><a
                            href="https://play.google.com/store/apps/details?id=com.awok.store&amp;hl=en"
                            target="_blank" className="android"><Trans>android_devices</Trans></a></li>
                        <li><a href="https://itunes.apple.com/us/app/awok.com/id1116482931?mt=8"
                               className="apple" target="_blank"><Trans>ios_devices</Trans></a></li>
                    </ul>
                </div>
            </div>
        </div>
    );
}

}

TopLinks.defaultProps = {
items: [
{
label: 'contact_us',
icon: 'fa fa-phone fa-lg',
link: 'about/contact/'
}, {
label: 'track_order',
icon: 'fa fa-map-marker fa-lg',
link: 'track-order/'
}
]
}

export default translate()(TopLinks);
`

only Trans is working but t() is not working giving me translate undefined error.

Thanks
Adil

[jamuhl]

i don't see where you directly use t there is only the usage of Trans component.

[adilsaeed31]

yes because t is not working that's why I removed from my code, and you want to see my configurations/code so I sent you.

and if you think that my code is fine as per i18n then why t is not working.

[jamuhl]

why do all the examples work and your code does not? that's what i want to find out...so i need your code failing...not the code have the not working stuff removed...

[adilsaeed31]

I m not following you. It's working Trans but t is not working only.

check route.jsx file where I have used I18nextProvide
import { I18nextProvider } from 'react-i18next'; import i18n from 'i18n'
<BrowserRouter forceRefresh={!supportsHistory}> <I18nextProvider i18n={i18n}> <App> <Header/> <Switch> <Route exact path="/" component={HomePage}/> <Route path="/cart" component={CartPage}/> <Route component={NotFound} status={404}/> </Switch> <Footer/> </App> </I18nextProvider> </BrowserRouter>

and then where ever I needed the translation I used translate hoc with that component and use Trans instead of t.

You can see In App I have Header and then switch and then homepage etc. so with translate hoc on header component with help of trans I can change languages now.

but still I want to use t() lke this.

[jamuhl]

render() {
    const { t } = this.props;
    return (
        <div className="col-md-6">
          {this.renderTopLinks()}
            <div
              className="top-header-left download-app"
              onMouseEnter={this.displayAppBox}
              onMouseLeave={this.hideAppBox}
              >
                <div className="dropdown dropdown-user">
                    <p><i
                        className="fa fa-mobile fa-lg mr-5"/>
                        {t('download_app')}
                      </p>
                    <ul className="dropdown-menu dropdown-menu-left download_app">
                        <li><a
                            href="https://play.google.com/store/apps/details?id=com.awok.store&amp;hl=en"
                            target="_blank" className="android"><Trans>android_devices</Trans></a></li>
                        <li><a href="https://itunes.apple.com/us/app/awok.com/id1116482931?mt=8"
                               className="apple" target="_blank"><Trans>ios_devices</Trans></a></li>
                    </ul>
                </div>
            </div>
        </div>
    );
}

that does not work?

[adilsaeed31]

No it's giving me cannot read property 'translate' undefined, but I want to do like this t('download_app') but it's not working at my end.

[jamuhl]

Can you paste the full stack trace from browser console?

[jamuhl]

Could you try not using a PureComponent? Might be related to that...

[jamuhl]

'translator' of undefined looks like you doing it serverside and i18next was not initialized when rendering...setup on server needs extra attentions -> try follow the sample for next.js or razzle: https://github.com/i18next/react-i18next/tree/master/example

i18next must be defined on server start

[adilsaeed31]

Hi

Hmmm. Plz clear me one confusion here. My app is totally based in react
js. But Im using express js only to grab all urls and send to index.html
that's it.

I have created one file named server. Js and in this file Im creating some
cookies brfore react index.html page.

So is that any involvement here like i18n is loading through server side.

On Feb 6, 2018 1:19 PM, "Jan Mühlemann" [e-mail] wrote:

'translator' of undefined looks like you doing it serverside and i18next
was not initialized when rendering...setup on server needs extra attentions
-> try follow the sample for next.js or razzle:
https://github.com/i18next/react-i18next/tree/master/example

i18next must be defined on server start

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/i18next/react-i18next/issues/389#issuecomment-363359780,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AF_kevGj11c9zrX5kAb9EN6hMBj3IZ7Tks5tSBkFgaJpZM4R6jyA
.

[adilsaeed31]

ah I got the issue now.
that's weird issue, I use changeLanguage method to change the language in a component and I was using t in same component render method where I use i18n.changeLanguage and convert this component into translate hoc so only in this component the t() is not working rest other compnents with translate hoc t() is working. but that should be work in same component too where I use i18n.changeLanguage.

Hurray i am going to convert all Trans to t now in all component except the changeLanguage component.

[adilsaeed31]

also can you please give me an answer too, why I need to use translate hoc can't we use t just like i18nextprovider before and simple use t() ?

[adilsaeed31]

oh sorry now on the same component where I have initialized the changeLanguage component t is working now, strange. but can you please give me the last translate hoc answer.

thanks
adil

[jamuhl]

Sorry just as you mentioned express i thought you talk about serverside rendering...so just a confusion.

The hoc is needed if you use multiple namespaces in combination with the xhr backend - so it asserts translations get loaded before rendering plus on i18n.changeLanguage it triggers a rerender of the components.

[adilsaeed31]

I need this answer

Can you please give me an answer too, why I need to use translate HOC can't we use t just like i18nextprovider before and inside all their component can we use just t() ?

[jamuhl]

The hoc is needed if you use multiple namespaces in combination with the xhr backend - so it asserts translations get loaded before rendering plus on i18n.changeLanguage it triggers a rerender of the components.

if you don't need the rerender on lng change, or do not load via xhr and multiple namespaces...you can use i18n.t directly.

The provider itself does not pass down the t function...just pass i18n to react context.

[adilsaeed31]

Ok I got it now. but how to use translate hoc with connect redux like below I am thinking.

translate(connect(mapStateToProps, mapDispatchToProps))(Component)

is this way I need to do it.

[jamuhl]

yes or use something like compose:

const extended = compose(
  translate('mobile_customer'),
  connect(mapStateToProps, mapDispatchToProps)
)(myComponent);

[adilsaeed31]

compose is react-redux method I need to import it and then use it ?

[adilsaeed31]

Also may be I am again missing something, now I want to pass some dynamic value in language with trans but it's not working and example on website is not so good and clear.

thanks
adil

[jamuhl]

Please can you paste some code...

[adilsaeed31]

Im pasting a code here but code is not showing good preview.

Im doing this.
<Trans i18nKey="country_alert_msg" name={props.country.NAME_EN}> {props.t('country_alert_msg')} </Trans>
and in language file
country_alert_msg: 'You are currently browsing {{name}} Website. If you wish to go to UAE Website please click'

[jamuhl]

just wrong mixing of Trans and t:

a) Trans:
<Trans i18nKey="country_alert_msg">You are currently browsing {{ name: props.country.NAME_EN }} Website. If you wish to go to UAE Website please click</Trans>

translation JSON will be something like: You are currently browsing <1>{{name}}<1/> Website. If you wish to go to UAE Website please click -> check console output for what you get for missing

b) using t:
<div>{props.t('country_alert_msg', { name: props.country.NAME_EN } )} </div> (JSON as you show above)

[adilsaeed31]

Thank you man you save me from nerdy situation.

[adilsaeed31]

brother t('country.United States') not working giving me i18next::translator: missingKey en translations country.United States country.United States

what to do ?

[jamuhl]

what is your translation json look like?

[adilsaeed31]

const Arabic = { language: 'Language', download_app: 'حمل التطبيق', android_devices: 'أجهزة اندرويد', ios_devices: 'اجهزة آبل', contact_us: 'تواصل معنا', track_order: 'تعقب طلبك', choose_lang: 'أو الاختيار من بينها', UAE: 'الإمارات', KSA: 'السعودية', select_regional_settings: 'اختار الاعدادات الاقليمية', ship_to: 'شحن إلى', select_currency: 'اختار العملة', save: 'حفظ', upcoming_flash_btn: 'عرض الفلاش القادم', sold_out_btn: 'بيعت', add_to_cart: 'اضافة للعربة', please_wait: 'برجاء الانتظار', view_cart: 'عرض العربة', sign_in: 'دخول', register: 'اشترك', welcome_guest: 'اهلا بك', remember_me: ' تذكرني', forgot_password: 'نسيت كلمة المرور', login_with: 'تسجيل الدخول بــ', new_customer: 'مستخدم جديد؟', register_now: 'سجل الان', welcome_back: 'اهلا بك', looking_for: 'انا ابحث عن ...', search: 'بحث', country_alert_msg: 'انت تتصفح موقع الولايات المتحدة. اذا اردت الذهاب الي موقع {{name}} برجاء الضغط', here: 'هنا', 'United States': 'الولايات المتحدة', country: { 'United States': 'United States' }, profile: { account: 'My Account' } }

this is example

[jamuhl]

in your i18next options you set keySeparator to false -> means no support for lookup.a.translation.that.is.nested -> your keys are interpreted as text

just remove the keySeparator option

[adilsaeed31]

yes man thank you so much it's done.