Zenn
🎨

React×TypeScriptでStorybookを5.1.9から6.0.26にメジャーアップデートしたハマりどころ

2020/10/14に公開
React
Storybook
TypeScript
webpack
tech

先日、Storybookを5系から6系にメジャーアップデートした。かなり手こずったので、同じ境遇にいる誰かのために、メモを残しておく。利用していたverは 5.1.9 (古い！)

まずは、素直にStorybookのメジャーアップデートコマンドを試す。

npx sb upgrade

これでStorybookを起動。

yarn storybook

これで動けば万事解決だが、そうはいかず。

94% after seal

という表示が出て94%のところでストップ。前のconfigファイルたちが悪さをしている可能性があるので、.storybook ディレクトリ配下を一旦すべて削除。storybookを再セットアップする。

npx sb init
yarn storybook

再び94%で止まった。同じ結果。package系で困ったときの伝家の宝刀、 node_modules/ の配下と yarn.lock の削除をしてもう一度try。

rm -rf node_modules/ yarn.lock
yarn install
yarn storybook

すると

╭───────────────────────────────────────────────────╮
│                                                   │
│   Storybook 6.0.26 started                        │
│   13 s for manager and 16 s for preview           │
│                                                   │
│    Local:            http://localhost:6006/       │
│    On your network:  http://192.168.11.8:6006/    │
│                                                   │
╰───────────────────────────────────────────────────╯

起動。あとは、下記の設定ファイルを元の設定に寄せていく。

.storybook/main.js

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials"
  ]
}

設定ファイルを変更したら、storybookを再ビルドすることを忘れずに( package.json の記述内容によって下記コマンドは異なります)

yarn build-storybook

5.1.9と6系の違いで直面した問題のリスト

config.js, addon.js, presets.js -> main.js へ統合

storybookの5系までは設定ファイルが3つにセパレートされていたのですが、6系では .storybook/main.js というファイルに統合された。
参考: https://medium.com/storybookjs/declarative-storybook-configuration-49912f77b78

ちなみに、他にも以下の設定ファイルがある

  • preview.js
    • globalなparameterやdecoratorの設定をするときはここに記述
    • ThemeProviderの設定とかを書く
  • manager.js
    • storybook自体のテーマとかを設定できる
      • ex. グリッドの太さを変えたりとか

※mediumのstorybookコミュニティをフォローしておくことをおすすめします。
https://medium.com/storybookjs

書き方が全然違う

今まで(5.1.9)では以下のように書いていた。

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

storiesOf('components/Button', module)
  .add('primary', () => (
    <Button text="送信" onClick={() => { console.info('click!'); }} />
  ))

6系ではかなり変わる。

import React from 'react';
import { Story, Meta } from '@storybook/react/types-6-0';
import { Button, ButtonProps } from './Button';

export default {
  title: 'components/Button',
  component: Button,
} as Meta;

const Template: Story<ButtonProps> = (args) => <Button {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  text: "送信",
  onClick: () => { console.info('click!'); },
};

参考: https://storybook.js.org/docs/react/writing-stories/args

~/xxx/xxx のようなチルダ利用のファイルインポートができない問題

これはwebpackのconfigミスに起因しています。

参考:
https://github.com/storybookjs/storybook/issues/3916#issuecomment-407681239
https://github.com/webpack/webpack-dev-server/issues/823

Discussion