Remixにstorybookを追加したのでメモ

Remixプロジェクトにstorybookを入れるのは面倒だった話

Remixの練習しようかなと環境構築をした際、storybookでコケちゃったのでその対応をメモ。

環境

練習用でgithubに公開しているのでpackage.jsonを参照
see: https://github.com/AmorSachimai/practice-remix-app/blob/7bcd84f661e19bbf1419fccca20f3e020cf9a942/package.json
備考: これはstorybookを入れる前の状態

公式通りにstorybookをインストールしたらエラーが出た

参考: https://storybook.js.org/docs

$ npx storybook@latest init

ほぼ自動でやってくれるので完了を待つ…
そして、インストールは完了。
storybookが自動で立ち上がろうとしたときにエラーが発生。

Running Storybook
yarn run v1.22.22
$ storybook dev -p 6006 --initial-path=/onboarding --quiet
@storybook/core v8.4.6

=> Failed to build the preview
Error: The Remix Vite plugin requires the use of a Vite config file
    at configResolved (./node_modules/@remix-run/dev/dist/vite/plugin.js:744:15)
    at async Promise.all (index 2)
    at resolveConfig (file://./node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:66404:3)
    at getOptimizeDeps (./node_modules/@storybook/builder-vite/dist/index.js:69:2932)
    at createViteServer (./node_modules/@storybook/builder-vite/dist/index.js:69:3557)
    at Module.start (./node_modules/@storybook/builder-vite/dist/index.js:69:4465)
    at storybookDevServer (./node_modules/@storybook/core/dist/core-server/index.cjs:36000:11)
    at buildOrThrow (./node_modules/@storybook/core/dist/core-server/index.cjs:35017:12)
    at buildDevStandalone (./node_modules/@storybook/core/dist/core-server/index.cjs:37190:78)
    at withTelemetry (./node_modules/@storybook/core/dist/core-server/index.cjs:35757:12)

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

✔ Would you like to help improve Storybook by sending anonymous crash reports? … no
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

エラーの原因と対応

Error: The Remix Vite plugin requires the use of a Vite config file

エラー内容的にはRemix Viteプラグイン(ここでいうstorybook)はViteの設定ファイルを必要としますよって意味なんだけど、結局それはどうやるんだって話だよ。

まあ、このエラー文をそのままググったら一発で答えと解決策出たので共有。
参考: https://github.com/storybookjs/storybook/discussions/25519#discussioncomment-8108937
公式: https://remix.run/docs/en/main/guides/vite#plugin-usage-with-other-vite-based-tools-eg-vitest-storybook

要するに、Remixは開発サーバーと本番ビルドでのみでの使用しか想定していないから、ほかのプラグインを使うときは構成ファイルからRimixを削除しろとのこと。

参考元にコードのサンプルもあったのでサクッと取り込んで起動したら問題なく動いた。

// vite.config.js
import { vitePlugin as remix } from "@remix-run/dev";
import { flatRoutes } from "remix-flat-routes";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

declare module "@remix-run/node" {
  interface Future {
    v3_singleFetch: true;
  }
}

const isStorybook = process.argv[1]?.includes("storybook");

export default defineConfig({
  plugins: [
    !isStorybook &&
      remix({
        future: {
          v3_fetcherPersist: true,
          v3_relativeSplatPath: true,
          v3_throwAbortReason: true,
          v3_singleFetch: true,
          v3_lazyRouteDiscovery: true,
        },
        ignoredRouteFiles: ["**/*"],
        routes: async (defineRoutes) => flatRoutes("routes", defineRoutes),
      }),
    tsconfigPaths(),
  ],
});

なるほど、起動コマンドにstorybookが含まれていたらRemixプラグインを含めないようにするわけか。
対応時のcommit: https://github.com/AmorSachimai/practice-remix-app/pull/2/commits/e90805588763db5bda94f132e50fd45b792f2fae

まだまだ設定は終わらない

初期インストール時に使わないパッケージまで混入していたので、サクッと削除。
remove @chromatic-com/storybook
remove @storybook/addon-onboarding

あらかた初期設定周りが終わったので次は実際にコンポーネントを作ってみてそれが動くかだよね。
インストール時にsampleがくっついてきたけど、そこではCSS Modulesとtailwindcssを使っていないので念のためこちらで全パターンのスタイルを適用したコンポーネントを作成。
sampleの追加: add LinkButton component

そしたら案の定作成したコンポーネントが読み込まれていない…追加設定が必要なのか？

対象フォルダを変えよう

今度はエラーが出ていないので困った。
…と思ったら思い出した。不要パッケージ削除の時に対象ディレクトリの設定しているとこあったわ。
storybookは最初sampleのディレクトリしか対象として見ていないんだね。

// .storybook/main.ts
import type { StorybookConfig } from "@storybook/react-vite";

const config: StorybookConfig = {
  stories: [
    "../stories/**/*.mdx",
    "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)", // storiesディレクトリ以下しか見ていない。
  ],
};
export default config;

ここ: https://github.com/AmorSachimai/practice-remix-app/blob/501d1c6af6579ee39bd3d2b5c4795a340227735f/.storybook/main.ts#L4-L7

なのでmain.tsを下記のように修正

// .storybook/main.ts
import type { StorybookConfig } from "@storybook/react-vite";

const config: StorybookConfig = {
  stories: ["../app/**/*.mdx", "../app/**/*.stories.@(ts|tsx)"], // このように修正
  addons: ["@storybook/addon-essentials", "@storybook/addon-interactions"],
  framework: {
    name: "@storybook/react-vite",
    options: {},
  },
};
export default config;

TypeScriptしか使う予定ないんで拡張子も不要なものは消しました。
次こそは！と起動…。

動いたぜ！と思ったものの、よく見ると一部スタイルが適用されていない…
マジか…

スタイルシステムをstorybookにもimportしよう

見た感じ、reactのstyleとvite標準のcss modulesは適用されているみたいだから、tailwindcssの設定が必要なのか。
こちらもググったらサクッと出て来たので結果から。
cssをインポートするだけでよさそう。

// .storybook/preview.ts
import type { Preview } from "@storybook/react";
import "../app/tailwind.css";

const preview: Preview = {
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
};

export default preview;

参考: https://storybook.js.org/recipes/tailwindcss

よし、これで大丈夫だな。

最後に

調べれば簡単に情報が出て来たのでそこまで苦労はしなかったが、いかんせん散らばっているのが面倒だったので記事としてまとめました。(後日自分が別プロジェクトで使うのでカンニングペーパーがわりです)

役に立てれば幸いです。