Storybook addons not working after migration from 3.x to 5.x (React)

959 Views Asked by At

I've recently upgraded the outdated tech stack of our application. Part of this was upgrading from Storybook 3 to Storybook 5. I followed the official specifications by Storybook for migrating from 3 to 4, then from 4 to 5. Storybook itself is working fine, however, the addons do not function on this new version. We are using the addons for knobs, actions, and locales.

For knobs, the message "no knobs found" is displayed. For actions, nothing is displayed at all. For locales, our two different locales (English and German) are displayed, but switching between the two does nothing.

There are no error messages displayed in the console.

I have tried deleting and reinstalling node_modules, as well as playing around with different versions, without success.

This is our config.js:

import { addDecorator, configure } from '@storybook/react';
import { setIntlConfig, withIntl } from 'storybook-addon-intl';

// Load the locale data for all your defined locales
import { addLocaleData } from 'react-intl';
import enLocaleData from 'react-intl/locale-data/en';
import deLocaleData from 'react-intl/locale-data/de';

addLocaleData(enLocaleData);
addLocaleData(deLocaleData);

// Provide your messages
const messages = {
  'en': require('../i18n/translations/en.json'),
  'de': require('../i18n/translations/de.json'),
};

const getMessages = locale => messages[locale];

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

// Register decorator
addDecorator(withIntl);

const req = require.context('../js', true, /\.stories\.js$/);

function loadStories() {
  req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);

addons.js:

import '@storybook/addon-knobs/register';
import '@storybook/addon-actions/register';
import '@storybook/addon-links/register';
import 'storybook-addon-intl/register';

Relevant parts of package.json:

"dependencies": {
    "@storybook/addon-actions": "5.1.1",
    "@storybook/addon-info": "5.1.1",
    "@storybook/addon-knobs": "5.1.1",
    "@storybook/addon-links": "5.1.1",
    "@storybook/addon-storyshots": "5.1.1",
    "@storybook/addons": "5.1.1",
    "@storybook/react": "5.1.1",
    "react": "^16.8.6",
    "webpack": "^4.31.0"
  },
  "devDependencies": {
    "@babel/core": "^7.4.4",
    "babel-loader": "^8.0.5",
    "storybook-addon-intl": "^2.4.1"
  }

A sample story:

import React from 'react';

import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { withInfo } from '@storybook/addon-info';
import { withKnobs, number, text, boolean } from '@storybook/addon-knobs';

import SvgTest from './SvgTest ';

const stories = storiesOf('Component/SvgTest ', module);
stories.addDecorator((story, context) => withInfo('common info')(story)(context));
stories.addDecorator(withKnobs);

stories.add('SvgTest ', () =>
  <svg
    height={800}
    key={'testKey'}
    width={1000}
  >
    <SvgTest
      objId={text('objId', 'objId')}
      height={number('height', 50)}
      width={number('width', 250)}
      onSelect={action('onSelect')}
      isSelected={boolean('isSelected', true)}
      x={50}
      y={50}
    />
  </svg>,
);
0

There are 0 best solutions below