【Storybook】Error: Illegal mix of CSF default export and storiesOf calls in a single file

Storybookを更新したら以下のエラーがコンソールにでていた

Error: Illegal mix of CSF default export and storiesOf calls in a single file

CSF（Component Story Format）とはStorybookの新しいフォーマットのこと

これまでのフォーマット

storiesOf('atoms/Button', module)
  .add('text', () => <Button>Hello</Button>)
  .add('emoji', () => <Button>😀😎👍💯</Button>);

これからのフォーマット

export default { title: 'atoms/Button' };

export const text = () => <Button>Hello</Button>;
export const emoji = () => <Button>😀😎👍💯</Button>;

これにより、textやemojiといったコンポーネントをJestやCypressで利用することが容易になる狙いがある

エラーの原因はexport defaultのところで、新フォーマットに則ってない場合に発生するみたいで、以下のようにStory作成を共通化しているファイルでexport defaultを使用していたが、

export default (config: State) => {
  const store = createStore(reducer, {});
  const withProvider = story => <Provider store={store}>{story()}</Provider>;

  const story = config.title
    ? `${config.componentType}|${config.title}`
    : config.componentType;
  const stories = storiesOf(story, module);
  return stories
    .addDecorator(withProvider)
    .add(config.storyName, () => config.component);
};

これを次のようのexport const createStory =に変更したら解消した

export const createStory = (config: State) => {
  const store = createStore(reducer, {});
  const withProvider = story => <Provider store={store}>{story()}</Provider>;

  const story = config.title
    ? `${config.componentType}|${config.title}`
    : config.componentType;
  const stories = storiesOf(story, module);
  return stories
    .addDecorator(withProvider)
    .add(config.storyName, () => config.component);
};