storybook に webpack5 を使ってもらう

1 min read

経緯

最近作ったプロジェクトで storybook を使おうとしたら css-loader 周りで以下のエラーが出てきました。

Module build failed (from ./node_modules/...):
TypeError: this.getOptions is not a function

調べると webpack4 と webpack5 の間での破壊的変更が原因のようです。
新しいプロジェクトなので css-loader や sass-loader は最新で、 webpack5 を明示的に入れているつもりでしたので何故かわからずでした

  // package.json
  "webpack":"^5.42.0"

解決方法

storybook の webpack5 対応は experimental で、webpack5 を使うようにちょっと設定する必要がありました

yarn add --dev @storybook/builder-webpack5 @storybook/manager-webpack5
// main.js
module.exports = {
  core: {
    builder: 'webpack5',
  },
  ...

これで無事動きました。

Discussion

ログインするとコメントできます