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

Question

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

Answer 1

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.