Перевод i18next - 404 Not Found in Storybook with i18next-http-backend

Я пробовал интегрировать i18next в мой сборник рассказов с i18next-http-backend и он пытается загрузить файл переводов из http://localhost:6006/public/locales/en/translation.json но получает 404. У меня есть языковые файлы внутри app/public каталог ( app является родным братом stories и .storybook каталоги)

Мой сборник рассказов i18next.js выглядит как показано ниже,

      import HttpApi from 'i18next-http-backend';
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';


const ns = ['translation'];
const supportedLangs = ['en', 'es'];

i18n.use(initReactI18next)
  .use(HttpApi)
  .init({
    //debug: true,
    lng: 'en',
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false,
    },
    defaultNS: 'translation',
    ns,
    supportedLangs,
  });

supportedLangs.forEach((lang) => {
  ns.forEach((n) => {
    i18n.addResources(
      lang,
      n,
      require(`../app/public/locales/${lang}/${n}.json`)
    );
  });
});

export {i18n};

Я пробовал добавить loadPath тоже конфиги (после [this][2]), но проблема все еще возникает.

        .init({
    //debug: true,
    lng: 'en',
    fallbackLng: 'en',
    ...
    backend: {
      loadPath: `/public/locales/{{lng}}/{{ns}}.json?lng={{lng}}&{{ns}}`,
      // loadPath: `/locales/{{lng}}/{{ns}}.json?lng={{lng}}&{{ns}}`, tried this too
    },

Вот как мои .storybook/preview.js похоже

      import { muiTheme } from 'storybook-addon-material-ui';
import { theme } from '@internal/component-library';
import {i18n} from './i18next.js';

export const decorators = [
  muiTheme([theme])
];
export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
  i18n,
  locale: 'en',
  locales: {
    en: 'English',
    es: 'Spanish',
  },
}

Мой package.js имеет следующие scripts для сборника рассказов

      "scripts": {
  ...  
  "storybook": "start-storybook -p 6006",
  "build-storybook": "build-storybook"
}

0 ответов

Другие вопросы по тегам