🔖

Next.js + Storybook V7 + Viteを動かすためにしたこと

2022/11/20に公開

Next.js

Storybook

Vite

tech

Storybook V7がviteをサポートしたと聞き、Next.jsでもstorybook V7+Vite使いたい！となりやったことをまとめておきます。

最終形はこちら

必要なもの

pnpm add -D vite @storybook/react-vite

不要なもの

pnpm remove @storybook/nextjs @storybook/react

@storybook/nextjsはnpx sb initでinstallされているので削除します

main.js

const { mergeConfig } = require('vite');
const path = require('path');
module.exports = {
  stories: [
    '../stories/**/*.stories.mdx',
    '../stories/**/*.stories.@(js|jsx|ts|tsx)',
  ],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
  ],
  framework: {
    name: '@storybook/react-vite',
    // このframeworkの指定ではwebpackで起動してしまいます（v6 -> v7のアップデートでframeworkの指定を見て、builderが決定されるようになりました）
    // name: '@storybook/nextjs', 
    options: {},
  },
  docs: {
    docsPage: true,
  },
  // v7からはvite.config.jsをデフォルトで見てくれるのですが、storybook以外はviteを使わないので、viteFinalを継続してます。
  viteFinal: async (config) => {
    return mergeConfig(config, {
      resolve: {
        alias: {
          '@': path.resolve(__dirname, '../src'),
        },
      },
    });
  },
};

困った時の確認ポイント

全てのstorybook系packageのバージョンが揃っていること

めちゃくちゃ基本だけどうっかり忘れがちなので確認しよう！の回でした。
npx sb@next infoを使って全てのパッケージのバージョンが揃っていることを確認します。
こんな感じで出力されます：

  npmPackages:
    @storybook/addon-essentials: ^7.0.0-alpha.50 => 7.0.0-alpha.50 
    @storybook/addon-interactions: ^7.0.0-alpha.50 => 7.0.0-alpha.50 
    @storybook/addon-links: ^7.0.0-alpha.50 => 7.0.0-alpha.50 
    @storybook/builder-vite: ^0.2.5 => 0.2.5
    @storybook/react-vite: 7.0.0-alpha.50 => 7.0.0-alpha.50 
    @storybook/testing-library: ^0.0.13 => 0.0.13

上記の例では@storybook/builder-viteのバージョンが7系に揃ってないので兄かしらうまく動かなくなります。
ので、アップデートが必要です。

v7系のアップデート内容をさらう

以下の内容でヒントをたくさん見つけました

あと、Twitterで「ぐぬぬ...」ってなって諦めていところを@storybook/builder-viteメンテナーの@IanVSさんに発見されてしまい、解決に至りました。
Thank you IanVS!

困った時の確認ポイント

全てのstorybook系packageのバージョンが揃っていること

v7系のアップデート内容をさらう

Discussion