next-i18next 翻译在故事书中不起作用，控制台记录 missingKey

Question

我正在设置故事书，我正在使用 next-i18next 进行翻译。我是这样设置的：

// .storybook/i18n.js
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

i18n.use(initReactI18next).init({
  fallbackLng: 'de',
  debug: true,
});

export default i18n;

// .storybook/preview.js
import { StoreMall } from '../components/layouts/StoreMall';
import { I18nextProvider } from 'react-i18next';
import i18n from './i18n';
import { ThemeProvider } from '@material-ui/core/styles';
import { jamesTheme } from '../components/colors';
import { themes } from '@storybook/theming';
import CssBaseline from '@material-ui/core/CssBaseline';

export const parameters = {
  // ...
};

export const decorators = [
  (Story) => (
    <I18nextProvider i18n={i18n}>
      <ThemeProvider theme={jamesTheme}>
        <CssBaseline />
        <StoreMall>{Story()}</StoreMall>
      </ThemeProvider>
    </I18nextProvider>
  ),
];

// .storybook/main.js
const path = require('path');

module.exports = {
  stories: ['../components/**/*.stories.js', '../components/**/*.stories.mdx'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    'storybook-dark-mode',
  ],
  webpackFinal: async (config, { isServer }) => {
    config.resolve.modules = [path.resolve(__dirname, '..'), 'node_modules'];
    config.resolve.alias = {
      ...config.resolve.alias,
      '@': path.resolve(__dirname, '../components'),
      store: path.resolve(__dirname, '../utils/stores'),
      dummy: path.resolve(__dirname, '../utils/dummy'),
    };
    if (!isServer) {
      config.node = {
        fs: 'empty',
      };
    }
    return config;
  },
};

现在在我使用翻译的任何地方，它都没有被翻译，并且这种类型的警告正在控制台中显示：

i18next::translator: missingKey de editor unlock_page_margins unlock_page_margins

这是我 package.json 中用于在本地启动故事书的脚本。

    "storybook": "start-storybook -s ./public -p 6006",

Storybook 尚未设置为可在网站上查看。

当我运行开发服务器时翻译工作，只是在故事书中它不工作。我正在按照本指南进行设置：https://dev.to/justincy/using-next-i18next-in-storybook-3he9

Answer 1

我安装了这个包：https://www.npmjs.com/package/i18next-http-backend

然后在我的 i18n.js 文件中，添加后端。

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

i18n
  .use(HttpApi)
  .use(initReactI18next).init({
    fallbackLng: 'de',
    debug: true,
});

export default i18n;

现在我的故事书里有了翻译。

next-i18next 翻译在故事书中不起作用，控制台记录 missingKey

next-i18next translation not working in storybook, console logs missingKey

i18next

react-i18next

storybook

next-i18next