next-i18next 翻译在故事书中不起作用，控制台日志丢失键

Posted 2023-02-19

【中文标题】next-i18next 翻译在故事书中不起作用，控制台日志丢失键

【英文标题】：next-i18next translation not working in storybook, console logs missingKey

【发布时间】：2021-12-17 00:02:30

【问题描述】：

我正在设置故事书，我正在使用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",

故事书尚未设置为在网站上查看。

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

【参考方案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;

现在我的故事书中得到了翻译。