[Bug] TypeError: Cannot read property 'read' of undefined

[GeorgeGkas]

I report a possible bug.

Prologue

I build a front-end app with react. I use i18next combined with react-i18next to handle my locales. The translations are loaded through a backend API with i18next-xhr-backend.

Today I wanted to add cache behavior to my translations. To achieve this behavior I installed the i18next-localstorage-backend along this this package [i18next-chained-backend].

My configuration file

import i18n from 'i18next'
import XHR from 'i18next-xhr-backend'
import Backend from 'i18next-chained-backend'
import LanguageDetector from 'i18next-browser-languagedetector'
import LocalStorageBackend from 'i18next-localstorage-backend'
import { reactI18nextModule } from 'react-i18next'

import i18nrc from './.i18nrc'

i18n
  .use(LanguageDetector)
  .use(reactI18nextModule)
  .use(Backend)
  .init({
    fallbackLng: i18nrc['fallback-locale'],
    debug: process.env.NODE_ENV === 'development',
    interpolation: {
      escapeValue: false
    },
    backend: {
      backends: [
        LocalStorageBackend,
        XHR
      ],
      backendOptions: [{
        expirationTime: 7 * 24 * 60 * 60 * 1000,
        prefix: 'i18next_'
      }, {
        loadPath: '/locales/{{lng}}/translation.json'
      }]
    },
    react: {
      wait: true
    }
  })

export default i18n

The problem

When I start my app application I get the following error in the console:

i18next::backendConnector: loaded namespace translation for language en {Footer: {…}, Header: {…}, Menu: {…}, Contact: {…}, Home: {…}, …}

Uncaught TypeError: Cannot read property 'read' of undefined
    at loadPosition (index.js:60)
    at index.js:66
    at index.js:93
    at XMLHttpRequest.x.onreadystatechange (ajax.js:69)

(index.js:60) points to the index.js file of i18next-chained-backend package.

var loadPosition = function loadPosition(pos) {
        if (pos > bLen) return callback(new Error('non of the backend loaded data;', true)); // failed pass retry flag

        var backend = _this2.backends[pos];

        // -----------
        if (backend.read) {  // <-- H E R E  !
        // -----------

          backend.read(language, namespace, function (err, data) {
            if (data && Object.keys(data).length > -1) {
              callback(null, data, pos);
              savePosition(pos - 1, data); // save one in front
            } else {
              loadPosition(pos + 1); // try load from next
            }
          });
        } else {
          loadPosition(pos + 1); // try load from next
        }
      };

If you watch closely the stack trace, I was able to load the en/translation.json file using XHR before the error occurs.

Expected behavior

The web app loads the translation without any errors.

My workspace

• Node: v8.10.0
• npm: 5.8.0
• yarn: 1.5.1
• i18next: 11.1.1
• i18next-browser-languagedetector: 2.2.0
• i18next-chained-backend: 0.1.1
• i18next-localstorage-backend: 1.1.4
• i18next-xhr-backend: 1.5.1

Additional Info

Both the i18next-localstorage-backend and the i18next-xhr-backend works indepedendly.

I tried to debug the code to find a workaround. I do not want to post any recommendations as you have a better understanding of the codebase and the application logic. If you want more details I will happily help you. 😃 Thanks in advance for your help. This is a really useful plugin.

[jamuhl]

Could you provide me with info what backend and pos are when throwing?

[jamuhl]

not sure why backend is undefined in your case...rather strange.

[GeorgeGkas]

I added a console.log statement before line 30. Here is the new output:

pos: 0, bLen: 2
pos: 1, bLen: 2
pos: 0, bLen: 2

logger.js:23 i18next::backendConnector: loaded namespace translation for language en {Footer: {…}, Header: {…}, Menu: {…}, Contact: {…}, Home: {…}, …}

pos: 2, bLen: 2

index.js:61 Uncaught TypeError: Cannot read property 'read' of undefined
    at loadPosition (index.js:61)
    at index.js:67
    at index.js:93
    at XMLHttpRequest.x.onreadystatechange (ajax.js:69)

It throws in the exact same spot.

[jamuhl]

arghh...i see...give me a few seconds

[jamuhl]

could you try: [email protected]

[GeorgeGkas]

yes hang on

[GeorgeGkas]

i18next::backendConnector: loaded namespace translation for language en Object
logger.js:23 i18next::backendConnector: loading namespace translation for language en-US failed Error: non of the backend loaded data;
    at loadPosition (index.js:57)
    at index.js:66
    at index.js:93
    at XMLHttpRequest.x.onreadystatechange (ajax.js:69)
output @ logger.js:23
logger.js:23 i18next: languageChanged en-US
logger.js:23 i18next: initialized Object

Now I get only the warning. I tried to lowed the upper bound too but I was not sure. Thank you for the quick reply!

[jamuhl]

ok seems to work now -> if you want to avoid this warning -> setting load or whitelist would be an option

[GeorgeGkas]

Thank you very much @jamuhl. You can close this issue.