storybook - next-i18next 翻译在故事书中不起作用,控制台日志丢失键
问题描述
我正在设置故事书,我正在使用我的翻译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
解决方案
我安装了这个包: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;
现在我在我的故事书中得到了翻译。
推荐阅读
- ios - Flutter- 无法通过 VSCode 构建 ios,只能通过 Xcode
- r - 根据R中的时间范围选择数据框
- amazon-web-services - 如何在不设置 CORS 的情况下从浏览器列出 S3 存储桶中的对象?
- python - 我如何使用用户输入浮点数并在 Python 中找到平均值、最小值、最大值和范围
- php - 如何将迁移中的更改部署到分解的数据库?
- python-3.x - 无法在 Django 中加载图像
- c# - 团队中具有 MS 身份验证的服务器端 Blazor?
- java - 当忙于旋转的Java线程绑定到物理内核时,是否会因为到达代码中的新分支而发生上下文切换?
- sql - 显示计数最少的数据
- mongodb - 无法在 vs 终端中启动 mongod