javascript - i18next 翻译是 404 Not Found in Storybook with i18next-http-backend

Question

我尝试i18next与我的 Storybook集成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"
}