StorybookをWebpack5で使う

StorybookにDefinePluginを導入、すると…？

webpack では DefinePluginをプラグインを誰しも使っていると思います。

真新しい環境にStorybookを取り込んだ際、これが動かない事態に直面しました。
.storybook/main.js の中身はこんな感じ。

module.exports = {
  "stories": [
    :
  ],

    :

  webpackFinal: async config => {
    config.plugins.push(

        :

      new webpack.DefinePlugin({
        NODE_ENV: JSON.stringify('test'),
      }),
    );

    return config;
  },
};

Storybookで見つけた不穏なエラー

問題のエラーがこちら。

yarn storybook
yarn run v1.22.10
$ start-storybook -p 6006
info @storybook/react v6.3.7
info
info => Loading presets
info => Loading 1 config file in "/Users/taniguchi/project/.storybook"
info => Loading 9 other files in "/Users/taniguchi/project/.storybook"
info => Adding stories defined in "/Users/taniguchi/project/.storybook/main.js"
info => Using PostCSS preset with postcss@7.0.36
info => Using default Webpack4 setup
0% compilingERR! TypeError: Cannot read property 'get' of undefined

ちなみに、記事を書き始めるまで気づかなかったのですが(汗)、この時点で不具合の答えが出ていました…

info => Using default Webpack4 setup

構築環境は最新のWebpack5を導入していました。

Webpack5向け対応が必要

Storybookは基底でWebpack4を想定したビルドシステムを保持しており、これが直近バージョンでは刷新されていませんでした。
その解決に、Add-onを利用しており、つまるところ以下のパッケージを取り込み main.js に設定を加筆すればなんとか動くということがわかりました。

storybook.js.org

Storybook Webpack 5 · GitHub

対応

以下のパッケージを追加

yarn add -D @storybook/builder-webpack5 @storybook/manager-webpack5

main.js を修正

module.exports = {
    "stories": [
      :
    ],
  
      :
  
+   core: {
+     builder: 'webpack5',
+   },
    webpackFinal: async config => {
      config.plugins.push(
  
          :
  
        new webpack.DefinePlugin({
          NODE_ENV: JSON.stringify('test'),
        }),
      );
  
      return config;
    },
};

総括

今回のミスはもともと知見のあったパッケージをメジャーアップデートの際、ドキュメントを見忘れていた点でした。新規プロダクトで更新の意識も薄く、さらに悪いことにStorybookがなんとなく動いていたことも災いしました。

公式ドキュメントの確認、大切ですね〜