Storybook in React project display keys of the translations, not the values

Question

I'm using "@storybook/react": "~6.3.12" and "react-intl": "^2.8.0" in my React project.

However, I'm stuck with a problem, that I'm not getting translation values of keys in JSON files. Already tried "storybook-addon-intl": "^2.4.1" and "storybook-react-intl": "^0.9.2".

preview.js looks like this:

import React from 'react';
import theme from '../src/theme';
import StoryRouter from 'storybook-react-router';
import { addDecorator, configure } from '@storybook/react';
import { Provider } from 'react-redux';
import configureStore from '../src/configureStore';
import { MuiThemeProvider } from '@material-ui/core/styles';
import { MuiPickersUtilsProvider } from '@material-ui/pickers';
import DateFnsUtils from '@date-io/date-fns';

import { addLocaleData, IntlProvider } from 'react-intl';
import { setIntlConfig, withIntl } from 'storybook-addon-intl';
import enLocaleData from 'react-intl/locale-data/en';
import deLocaleData from 'react-intl/locale-data/de';
import en from '../src/messages/en.json';

import {reactIntl} from './reactIntl.js';

// Global Redux/Intl Provider
const store = configureStore();

const withProvider = (story) => (
  <Provider store={store}>
    <MuiThemeProvider theme={theme}>
      <MuiPickersUtilsProvider utils={DateFnsUtils} >
        <IntlProvider
        //locale='en' messages={en}
        >
          {story()}
        </IntlProvider>
      </MuiPickersUtilsProvider>
    </MuiThemeProvider>
  </Provider>
);
addDecorator(withProvider);
addDecorator(StoryRouter());

// addLocaleData(enLocaleData);
// addLocaleData(deLocaleData);

// const messages = {
//   'en': require('../src/messages/en.json'),
//   'de': require('../src/messages/de.json')
// };

// const getMessages = (locale) => messages[locale];

// setIntlConfig({
//   locales: ['en', 'de'],
//   defaultLocale: 'en',
//   getMessages,
// });

// addDecorator(withIntl);

const req = require.context('../src/stories', true, /\.stories\.js$/)
function loadStories() {
  req.keys().forEach((filename) => req(filename))
}

configure(loadStories, module);

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
  docs: {
    // opt-out of inline rendering
    inlineStories: false,
  }
}

and sample component like this

login.stories.js

import React from 'react';
import { storiesOf } from '@storybook/react';

import Login from '../../components/login/index';
import SmsVerificationDialog from '../../components/login/smsVerification/SmsVerificationDialog';

export default {
 title: 'Login/Login',
 component: Login,
};

storiesOf('Login/Login', module)
  .add('Login Page', () => (
    <Login />
  ))
  .add('Sms Verification Dialog', () => (
    <SmsVerificationDialog open={true} />
  ))

So output I have look like this

login.dialog.title And I need to see "Login to your account"

What might cause the issue and how to solve it? Might there be a solution without addons because I opened issues in GitHub repos and got no answers at all, seems like those repos are abandoned.

Storybook in React project display keys of the translations, not the values

0 Answers0