Как включить файлы локали i18next в сборку ReactJS

Question

Я искал много постов, но мне не повезло исправить проблему со сборкой.

У меня две основные проблемы

1. /public/locale/xx/xxx.json пути к файлам не включаются после сборки
2. Пути фоновых изображений, используемые в CSS, не работают должным образом

Структура выглядит так:

my-app
  public
    images
      image.jpg
    locale
      xx
        xxx.json
  src

И фоновое изображение URL, как url(/images/image.jpg),

URL работает хорошо на Dev, но в производстве / после сборки, это относительно / путь, независимо от homepage установить в package.json

То же самое касается файлов локали.

PS: homepage не будет /скажем так будет /myapp/

Мой файл i18n выглядит так:

i18n
  use(Backend)

Я пытался установить настройки бэкэнда на что-либо (__dirname | env.PUBLIC_URL,...etc), но ничего не работает.

Кажется, это очень распространенная проблема, так как я нашел много постов о ней везде, но нет четких ответов о том, как правильно задавать относительные пути при запуске. npm run build

Если у вас есть знания, пожалуйста, дайте пошаговое руководство для манекенов.

Answer 1

Мне удалось заставить его работать, используя следующую настройку:

Состав:

├── public
|  ├── locales
|  ├── ar
|  |  ├── errors.json
|  |  ├── general.json
|  |  └── warnings.json
|  ├── en
|  |  ├── errors.json
|  |  ├── general.json
|  |  └── warnings.json
├── src
|  ├── App.js
|  ├── i18n.js

i18n.js

import i18n from 'i18next';
import Backend from 'i18next-xhr-backend';
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
  // load translation using xhr -> see /public/locales
  .use(Backend)
  // detect user language
  .use(LanguageDetector)
  .init({
    fallbackLng: 'en',
    debug: false,
    defaultNS: 'general',
    ns: ['general', 'errors', 'warnings'],
    backend: {
      loadPath: `${window.location.pathname}locales/{{lng}}/{{ns}}.json`
    },
    load: 'unspecific',
    // special options for react-i18next
    // learn more: https://react.i18next.com/components/i18next-instance
    react: {
      wait: true
    }
  });

export default i18n;

Составная часть

пространства имен включены для каждого компонента по желанию (все, кроме defaultNS конфигурация)

class MyComponent extends React.Component{...}
export default withNamespaces('general', 'errors')(MyComponent)