Sassを利用しているNext.jsをStorybook6から7に移行する

• Storybookのv7がでてたのでアップデートしてみる。2023/5/18時点の7.0.12にアプデする。
• リポジトリ

道のり

6 -> 7に移行し、起動できるようになるまで

• 公式の Migration guide for Storybook 7.0 のupgradeコマンドをたたくも、何故かupgradeされない
• 仕方ないのでpackage.jsonを自分で編集
• Storybookをバージョン6から7への移行 の記事を参考2点実施
  • storybookコマンドを変更
  • @storybook/nextjsをinstall
  • main.jsを編集
  • storyを編集
• ここでstorybook起動するも動かなかったので、再度upgradeコマンドを叩いく。質問が変わり、起動はするようになった。

---

起動後エラーの修正

• 下記のエラーが出た。

ModuleBuildError: Module build failed (from ./node_modules/@storybook/nextjs/node_modules/sass-loader/dist/cjs.js):
SassError: expected "{".
  ╷
2 │       import API from "!../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js";
  │                                                                                                     ^
  ╵
  src\components\frame\frame.module.scss 2:101  root stylesheet

• 2022/9に同じ悩みを抱えた人がいた
  • ERR! SassError: expected "{" · Issue #19266 · storybookjs/storybook · GitHub
  • 2023/4/7のコメントで『@storybook/nextjsを利用している場合は、sassに関する設定をせず、下記のようにすればいけますよ』というコメントがある
    • @storybook/addon-stylingをinstall+addonsに追加して、sass-loaderのくだりはコメントアウトしたら通るようになった
• 完成形は下記。v6の頃よりかなりシンプルになっていい感じ。

const path = require('path')

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    {
      name: '@storybook/addon-styling',
      options: {},
    },
  ],
  framework: {
    name: '@storybook/nextjs',
    options: {},
  },
  features: {
    buildStoriesJson: true,
  },
  docs: {
    autodocs: true,
  },
}

おわり

• 今までstorybook起因のvulnerabilitiesが結構あってちょっと気になってたのだが、v7になって一気に解消されてvulnerabilitiesがゼロになった。嬉しい。