Обработка переводов React на уровне компонентов

Чего я хочу добиться, так это того, что у меня есть переводы для всех компонентов. Когда я устанавливаю эти компоненты, они должны отображаться сами по себе. Еще одна вещь, которую я хочу добиться, заключается в том, что мой проект может отменять переводы на уровне компонентов. Это на тот случай, если кто-то решит, что переводы, которые там есть, не то, что нам нужно.

Что я сделал в своих компонентах, так это загрузил i18n:

import i18n from 'i18next';
import XHR from 'i18next-xhr-backend';
import Cache from 'i18next-localstorage-cache';
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
  .use(XHR)
  .use(Cache)
  .use(LanguageDetector)
  .init({
    backend: {
      loadPath: '../dist/locales/{{lng}}/{{ns}}.json',
    },
    fallbackLng: 'en',
    react: {
      wait: true
    },
    ns: ['authentication'],
    defaultNS: 'authentication',
    debug: false,
    cache: {
      enabled: true
    },
    interpolation: {
      escapeValue: false, // not needed for react!!
      formatSeparator: ',',
      format: function(value, format) {
        if (format === 'uppercase') return value.toUpperCase();
        return value;
      }
    }
  });

export default i18n;

Это отлично работает в моем сборнике рассказов, но когда я загружаю это в свой основной проект, он использует ../ из моего корня сборки, который на самом деле является не самим компонентом, а моим основным проектом реализации.

Как я могу это решить и как я могу гарантировать, что я могу даже расширить это?

ОБНОВЛЕНИЕ: Ниже приведен список текущей структуры папок, как задано в следующих вопросах:

#Component
dist
--.gitkeep
--locales
--commonjs
--es
src
--actions
----index.js
--components
----compname
------index.js
--reducers
----foo.js
--i18n.js
--index.js
test
.babelrc
package.json
Jenkinsfile

#Project
react
--assets
----css
------app.scss
--dist
----.gitkeep
--src
----index.js
----store.js
webpack.config.js

Спасибо