Storybook導入時に、webpackのバージョンで詰まった話

経緯

Storybookの公式に沿ってインストールして実行する際、下記のようなエラーが発生

TypeError: Cannot read property 'get' of undefined

原因

見ただけではなんのことではわからなかったのだが、調べてみると使っているwebpackのバージョンが違うことが原因だった

公式のinitコマンドを打つと、自動的にwebpack4が使われるらしく、webpack5を使っている場合はエラーが出るみたい（もう少しわかりやすいエラー出してほしい・・・）

解決策

.storybook/main.jsを書き換えることでwebpack5を適応することができる

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

(coreの部分を追加)

もしくはinit時にオプションを付けることで、自動的にwebpack5を適応してくれる

npx sb init --builder webpack5

（公式：https://storybook.js.org/blog/storybook-for-webpack-5/）

結果

これで実行コマンドを打てば、storybookが実行され、ブラウザが開きました
めでたしめでたし