I am setting up storybook and for my translations I am using next-i18next
. This is How I set it up:
// .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;
},
};
And now anywhere where I use translation, it's not getting translated and this type of warning is being displayed in the console:
i18next::translator: missingKey de editor unlock_page_margins unlock_page_margins
This is the script in my package.json for starting storybook locally.
"storybook": "start-storybook -s ./public -p 6006",
Storybook is not set up to be viewed on a website yet.
The translations work when I run the dev server, just in storybook it's not working. I was following this guide to set it up: https://dev.to/justincy/using-next-i18next-in-storybook-3he9
I installed this package: https://www.npmjs.com/package/i18next-http-backend
And then in my i18n.js
file, I add the backend.
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;
And now I am getting the translation in my storybook.