Chaining HTTPBackend with LocalStorageBackend

[abhijit945]

🐛 Bug Report

A clear and concise description of what the bug is.

To Reproduce

A codesandbox example or similar
or at least steps to reproduce the behavior:

Assume System.resolve resolves to localhost:5000 via @libra/ui

import ChainedBackend from 'i18next-chained-backend';
import HTTPBackend from 'i18next-http-backend';
import LocalStorageBackend from 'i18next-localstorage-backend';

  const loadPath = (language: string, namespace: string) =>
    // eslint-disable-next-line no-undef
    System.resolve(`@libra/ui/locales/${language}/${namespace}.json`);

  const instance = i18n.createInstance();

  instance
    .use(ChainedBackend)
    .use(initReactI18next)
    .init({
      supportedLngs: ['ja-jp'],
      fallbackLng: 'en-us',
      ns: ['translation'],
      react: {
        wait: true,
        useSuspense: false,
      },
      backend: {
        backends: [LocalStorageBackend, HTTPBackend],
        backendOptions: [{ loadPath }],
      },
      keySeparator: false,
      lowerCaseLng: true,
    });

Expected behavior

There are 2 scenarios here:

1. With ChainedBackend + HTTPBackend + LocalStorageBackend similar to here
   The network request that are made are http://localhost:8000/locales/ja-jp/translation.json instead (resulting in 404)

2. With HTTPBackend only: With following changes:

instance
    .use(HTTPBackend)
    .use(initReactI18next)
    .init({
        supportedLngs: ["ja-jp"],
        fallbackLng: "en-us",
        ns: ["translation"],
        react: {
            wait: true,
            useSuspense: false,
        },
        backend: {
            loadPath,
        },
        keySeparator: false,
        lowerCaseLng: true,
    });

Can confirm this works: http://localhost:5000/locales/ja-jp/translation.json with a satisfying 200 OK!

Additional Debug information

For some reason the loadPath going into each plugin is different. The loadPath should be a function (which is only true to first plugin and not the second)

Your Environment

• runtime version: i.e. node v12, browser chrome
• i18next version: latest
• os: Mac

[jamuhl]

might be you should pass backendOptions correctly...backendOptions: [{}, { loadPath }],

[abhijit945]

Works! That does make sense! Thank you.

[adrai]

If you like this module don’t forget to star this repo. Make a tweet, share the word or have a look at our https://locize.com to support the devs of this project.

There are many ways to help this project 🙏