Next.js プロジェクトのパッケージをいろいろ更新したら、storybookの起動でエラーが出るようになりました。いつものsass関連のエラーです。

$ TypeError: this.getOptions is not a function

sass-loaderやstyle-loaderのバージョンを下げれば解消すると思ったら、なかなかうまくいかず。そもそもが webpack4 と webpack5 間の問題なのとで、もういっそ storybook にも webpack 5 を使ってもらうことにしました。

webpack 5 と、ついでに cli をインストールする。

storybook - webpack 用のモジュールをインストールする。

$ npm i -D @storybook/builder-webpack5 @storybook/manager-webpack5

.storybook/main.js内でbuilderにwebpack5を指定する。

module.exports = {
  // 中略
  // 以下を追記
  core: {
    builder: 'webpack5',
  }
}

これで無事、webpack5 を使用してstorybookの起動に成功。

概要
Next.js プロジェクトのパッケージをいろいろ更新したら、storybookの起動でエラーが出るようになりました。いつものsass関連のエラーです。
$ TypeError: this.getOptions is not a function
sass-loaderやstyle-loaderのバージョンを下げれば解消すると思ったら、なかなかうまくいかず。そもそもが webpack4 と webpack5 間の問題なのとで、もういっそ storybook にも webpack 5 を使ってもらうことにしました。
インストール
webpack 5 と、ついでに cli をインストールする。
$ npm i -D webpack webpack-cli   
storybook - webpack 用のモジュールをインストールする。
$ npm i -D @storybook/builder-webpack5 @storybook/manager-webpack5
storybook設定
.storybook/main.js内でbuilderにwebpack5を指定する。
module.exports = {
  // 中略
  // 以下を追記
  core: {
    builder: 'webpack5',
  }
}
これで無事、webpack5 を使用してstorybookの起動に成功。

 
